カード列に同じ高さのブートストラップ カードを作成するにはどうすればよいですか?

カード列内の同じ高さのブートストラップ カード

ブートストラップのカード列クラスを使用する場合、高さの異なるカードにより不均等なレイアウトが作成される可能性があります。カードの高さを同じにするには、次の解決策を検討してください。

Columns で align-items-stretch を使用する

card-columns クラスを含む親行に、ユーティリティ クラス d-flex align を追加します。 -items-各列にストレッチします。これにより、カードのコンテンツが垂直方向に整列され、同じ高さのカードが効果的に作成されます。

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
            <!-- CARD HERE -->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!-- CARD HERE -->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!-- CARD HERE -->
        </div>
    </div>
</div>

Bootstrap 5 (BS5) の例

次の完全な HTML 例は、align-items-stretch ソリューションを示しています。 BS5:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
    </div>
</div>

以上がカード列に同じ高さのブートストラップ カードを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。