Bootstrap 4 列内で同じ高さのカードを作成するにはどうすればよいですか?

列内の 4 つの同じ高さのカードをブートストラップする

問題

Bootstrap 4 を利用する多くの開発者は、列内のカードの高さが異なることが多いという共通の問題に遭遇します。 、主に内容または見出しサイズの違いが原因です。これにより、不均一で見た目に魅力のないレイアウトが作成される可能性があります。

解決策

Bootstrap 4 列内でカードの高さを同じにするには、h-100 クラスを利用して高さを設定します。カードを含む列の 100% に変換します。これにより、カードが利用可能なスペースの全高を占めるようになります。

実装

HTML マークアップ:

<code class="html"><div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-12">
      <div class="card h-100">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

注:

• .col-* クラスは、 のような中間要素ではなく、.card div に直接適用する必要があります。 Card-deck.
• カード上で float を使用する必要はありません。
• h-100 クラスはすべてのカードに適用できます列内で、または特定のカードを選択して高さを調整できます。

コード例 (Codeply):

https://codeply.com/go/ hKhPuxoovH

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