Bootstrap 4 の Flexbox Grid を使用して石積みの柱のレイアウトを作成するにはどうすればよいですか?

Bootstrap 4 の Flexbox グリッドを使用した組積造柱レイアウト

Bootstrap 4 の Flexbox グリッド システムはレスポンシブ レイアウトの作成に多用途性を提供しますが、それは事実です。列は最初は同じ高さで表示されます。ただし、「カード列」機能を使用して石積みの列レイアウトを実現することは可能です。

カード列

Bootstrap 4 ドキュメントで説明されているように、「カードは.card-columns で囲むことにより、CSS だけでメイソンリーのような列に編成されます。」この機能は CSS 列プロパティを利用しており、フレックスボックスと比較して簡単に配置できます。

石積みの柱レイアウトを作成するには、.card 要素を .card-columns コンテナ内でラップするだけです。その後、カードはコンテンツによって高さが決定され、動的に配置されます。

このアプローチでは、Bootstrap のフレックスボックス グリッドのシンプルさと応答性を維持しながら、望ましい石積み効果を提供します。

例

以下は、カード列を使用して、石積みのレイアウト:

カード列を使用すると、Bootstrap 4 のフレックスボックス グリッド システムを利用して目的の石積みの柱レイアウトを簡単に実現できます。

以上がBootstrap 4 の Flexbox Grid を使用して石積みの柱のレイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。