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

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

問題:

ブートストラップ カードを扱うときの高さカードのタイトルの長さによってカードの内容が異なる場合があります。この不一致により、列に配置したときにカードの高さが異なる可能性があります。

解決策:

Bootstrap 4 列ですでに採用されている Flexbox を利用して、すべてのカードの高さが異なることを確認します。カードの高さは同じです。高さ 100% を示すクラス h-100 を各カードに追加すると、カードはそれぞれの列内の利用可能な高さを自動的に埋めます。

例:

<code class="html"><div class="row">
  <div class="col-md-4 col-sm-6 col-12">
    <div class="card h-100">
      ...
    </div>
  </div>
  <!-- Similar cards and columns -->
</div></code>

追加メモ:

• カードはすでに行と列に配置されているため、カードをフローティングする必要はありません。
• ネストを避けてください。.col-* .card-deck 内のクラス;代わりに、.row.

内に直接配置する必要があります。

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