Bootstrap 4 カード列の同じ高さのカードを作成するには?

カード列で同じ高さのブートストラップ カードを作成する

ブートストラップ 4 では、カード列クラスを使用してカードを列に表示します, ただし、カードの高さは内容によって異なる場合があります。カードの高さを同じにするには、CSS とフレックスボックスを組み合わせて使用​​します。

解決策:

カードに固定の最小高さを設定する代わりに、以下を使用できます。カード列内の列要素に対する align-items-stretch ユーティリティ。これにより、列が最も高いカードの高さいっぱいまで伸びるようになります。

.card-columns .col {
    align-items: stretch;
}

実装:

カードの列をコンテナ内で包み、各カードをコンテナ内で包みます。列として以下:

<div class="container">
    <div class="row">
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
    </div>
</div>

注:

• 列幅 (この例ではcol-lg-4) がすべての列で等しいことを確認してください。
• カードに背景や枠線がある場合は、枠線と背景が揃うように CSS を調整する必要がある場合があります。

以上がBootstrap 4 カード列の同じ高さのカードを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。