応答性の高い列数を備えた Bootstrap 4 カードデッキで同じカードの高さを実現するにはどうすればよいですか?

応答性の高い列数を備えた Bootstrap 4 カードデッキ

シナリオ:

Bootstrap 4 のカードデッキ機能を実装して、異なるビューポート サイズでカードの高さが同じになります。

問題:

デフォルトでは、カードデッキはビューポート サイズに関係なく 4 枚のカードを 1 列に表示し、コンテンツの望ましくないサイズ変更が発生します。

解決策 1: グリッド列 (Bootstrap 4 Alpha 2)

Bootstrap 4 フレックスボックスがサポートされる前は、

を使用する回避策が必要でした。カード幅を制御するために、適切なグリッド列クラス (col-* など) を持つ要素。次に、フレックスボックスを適用して同じ高さを強制しました。

<code class="css">.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}</p>
<p><strong>解決策 2: h-100 クラス (Bootstrap 4 Alpha 6 以降)</strong></p>
<p>フレックスボックスがデフォルトになるBootstrap 4 Alpha 6 では、さらに単純なソリューションが登場しました:</p>
<pre class="brush:php;toolbar:false"><code class="css">.h-100 {
  height: 100%;
}</code>

h-100 クラスをカード要素に適用して、高さを自動的に 100% に設定し、高さを等しくします:

<code class="html"><div class="card h-100">
  ...
</div></code>

注:

より応答性の高いレイアウトの場合は、d-*-col (例: d-md-col-6) などのブレークポイント クラスを使用して特定の列数を指定することを検討してください。画面サイズ

以上が応答性の高い列数を備えた Bootstrap 4 カードデッキで同じカードの高さを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。