ブートストラップ カード列でカードの高さを同じにする方法は?

ブートストラップ カード列: カードの高さを均等にする

ブートストラップ 4 では、カード列クラスを使用して、複数のカードを配置する見た目の美しいレイアウトを作成できます。高さが可変の列。ただし、これによりカードの高さが不均一になる可能性があり、望ましくない場合があります。

カードの高さを均一にするために、Bootstrap は 2 つのソリューションを提供します。

オプション 1: 行の高さを設定するか、または列要素

行または行に align-items-stretch ユーティリティ クラスを設定することで、カードの高さを揃えることができます。カードが含まれる列要素。これにより、利用可能なスペースを埋めるためにカードが垂直方向に引き伸ばされます。

<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>

オプション 2: Bootstrap 5 用の Flexbox ソリューション

Bootstrap 5 の場合、次の CSS コードを使用できます。 Flexbox を使用してカード列内のカードの高さを均等にするために使用されます。プロパティ:

.card-columns {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

CodePen の例

CodePen でのこのソリューションのライブ デモンストレーションについては、次のリンクにアクセスしてください:
https://codepen .io/Kerrys7777/pen/QWgwEeG

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