Bootstrap 4 でレスポンシブなカードデッキを作成するには?

列数に対応した Bootstrap 4 カードデッキ

Bootstrap 4 のカードデッキ機能により、同じ高さのカードを作成できます。ただし、デフォルトのレイアウトでは、ビューポートの幅に関係なく、1 行に 4 枚のカードが表示されます。これは、すべての状況で望ましいとは限りません。利用可能なビューポート スペースに基づいて列数を調整する応答性の高いレイアウトが望ましい場合があります。

これを実現するには、フレックスボックス表示プロパティを使用して次のように指定する方法があります。特定の列数の後に強制的に新しい行に折り返すフレックス値。これは、col-- グリッド クラスを使用して実装できます。

<code class="css">.row > div[class*="col-"] {
  display: flex;
  flex: 1 0 auto;
}</code>

この CSS を追加すると、行内の各列がフレックスボックス項目のように動作し、ラップして調整できるようになります。その幅は、使用可能なビューポート スペースに基づいて動的に設定されます。

ただし、Bootstrap 4 Alpha 6 以降では、これらの列に対してフレックスボックスがデフォルトで有効になっています。したがって、望ましい応答動作を実現するために追加の CSS は必要ありません。代わりに、h-100 クラスを使用して、すべてのカードを最大の高さに設定するだけです。

例:

<code class="html"><div class="card-deck-wrapper">
  <div class="row">
    <div class="h-100 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

このソリューションは、応答性の高いカードデッキを提供します。これにより、ビューポートの幅に基づいて列の数が調整され、カードの位置が揃えられ、同じ高さが保たれるようになります。

以上がBootstrap 4 でレスポンシブなカードデッキを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。