Bootstrap 4 でさまざまなカード幅を持つレスポンシブなカードデッキを作成するにはどうすればよいですか?

Bootstrap 4 カード幅が可変のカードデッキ

問題:

Bootstrap 4 のカード-デッキ機能はカードを横に並べますが、ビューポートのサイズに関係なく、すべてのカードの幅は同じになります。これにより、狭い画面では最適なプレゼンテーションが得られない可能性があります。

解決策:

ビューポート サイズに基づいてカード幅が異なるレスポンシブなカードデッキを作成するには、次の手順:

1.カード デッキの使用を排除する:

カード デッキ クラスはテーブル セル レイアウトを使用するため、柔軟性が制限されます。代わりに、グリッド列クラス (col-sm-4、col-lg-2 など) を使用してカード幅を定義します。

2。フレックスボックスを有効にする:

Bootstrap 4 Alpha 6 以降のバージョンでは、デフォルトでフレックスボックスが使用されます。ただし、以前のバージョンを使用している場合は、次の CSS を使用して手動で有効にする必要がある場合があります:

.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}

3.カードの高さの設定:

すべてのカードの高さが同じになるように、各カードに h-100 クラスを追加します:

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

4.レスポンシブ ブレークポイント:

col-- クラスを使用して、特定のビューポート サイズ (つまり、画面幅) に応じて異なるカード幅を定義します:

<div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
  ...
</div>

コード例:

<div class="row">
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
</div>

このソリューションを使用すると、ビューポートのサイズに基づいてサイズを変更するレスポンシブなカードデッキを作成し、レイアウトをさまざまな画面に確実に適応させることができます。

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