ホームページ > 記事 > ウェブフロントエンド > ビューポートに基づいて列数を指定してレスポンシブな Bootstrap 4 カードデッキを作成するにはどうすればよいですか?
同じ高さのカードを揃えるためにブートストラップ 4 にカードデッキを実装することは、特にレスポンシブを考慮する場合、困難になる可能性があります。デザイン。デフォルトでは、Bootstrap 4 のカードデッキは、ビューポートのサイズに関係なく、カードを 4 列に広げます。
この問題は、カードが異なるビューポートでも一貫した外観を維持したい場合に発生します。サイズ。 Bootstrap 4 のデフォルト設定では、最小カード サイズが考慮されておらず、カードデッキの動作に対するビューポート クラスの影響も考慮されていません。
ビューポート サイズに基づいて列の数を調整する応答性の高いカードデッキでは、Bootstrap 4 で導入された可視性ユーティリティを活用できます。特定のブレークポイントで特定の列の可視性を設定することで、強制的にラップして目的のレイアウトを作成できます。
4.1 より前の Bootstrap 4 バージョンでは、グリッドの Col-* クラスを使用してカード幅を制御できます。ただし、フレックスボックスを有効にして列の高さを確実に揃えるために、追加の CSS スニペットが必要です。
<code class="css">.row > div[class*='col-'] { display: flex; flex:1 0 auto; }</code>
Bootstrap 4 アルファ 6 以降のバージョンでは、デフォルトでフレックスボックスが有効になっています。したがって、h-100 クラスを利用してカードをフルハイトに設定できます。このアプローチにより、フレックスボックスの動作を処理するための追加の CSS が不要になります。
要約すると、使用している Bootstrap 4 バージョンに基づいて適切なテクニックを採用することで、必要な機能を備えた応答性の高いカードデッキを実現できます。列数を調整し、さまざまなビューポート サイズにわたって一貫したルック アンド フィールを維持します。
以上がビューポートに基づいて列数を指定してレスポンシブな Bootstrap 4 カードデッキを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。