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

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

問題:

ブートストラップ 4 を使用すると、列内のカードが変化しますタイトルのテキストの長さに基づいて高さを調整します。コンテンツの高さが異なる場合でも、同じ高さのカードを実現するにはどうすればよいですか?

答え:

懸念とは裏腹に、Bootstrap 4 列はすでにフレックスボックスを利用しています。これにより、それらが本質的に同じ高さになることが保証されます。カードがそれぞれの列の高さ全体を占めるようにするには、次のコード スニペットに示すように、カードに h-100 クラスを追加するだけです。

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

追加の考慮事項:

• カードのフローティングは不要なので避けてください。
• .row から .card-deck クラスを削除します。 .col-* は .row の直接の子である必要があります。

デモ:

ライブについては https://codeply.com/go/hKhPuxoovH にアクセスしてください。ソリューションのデモ。

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