応答性の高い列数を備えた 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;
}</code>

解決策 2: h-100 クラス (Bootstrap 4 Alpha 6 以降)

フレックスボックスがデフォルトになるBootstrap 4 Alpha 6 では、さらに単純なソリューションが登場しました:

<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 サイトの他の関連記事を参照してください。