Bootstrap 4 のフレックスボックス グリッドとカード列を使用して組積造レイアウトを作成するにはどうすればよいですか?

Bootstrap 4 フレックスボックス グリッドを使用した組積造レイアウトの実装

Bootstrap 4 のフレックスボックス グリッド システムでは、同じ高さの柱を使用して組積造レイアウトを作成するのが難しい場合があります。ただし、一部の組み込みの Bootstrap クラスを使用すると効果的に実現できます。

カード列機能

Bootstrap 4 は、CSS 列プロパティを利用してカードを石積みのグリッドのように配置するカード列機能を提供します。 。この方法により、配置プロセスが簡素化され、カードが列をまたいで分割されるのを防ぎます。

<div class="container">
  <div class="card-columns">
    ...Your cards HTML code...
  </div>
</div>

カードをインライン ブロックに設定する

カードが列をまたいで分割されないようにするには、次のようにカードを設定することをお勧めします。カード列コンテナ内のインラインブロック。これは、デフォルトの column-break-inside:avoid スタイルが完全には信頼できないためです。

.card {
  display: inline-block;
}

サンプル コード

ここに、Bootstrap 4 カードを使用した石積みのレイアウトを示すサンプル コード スニペットを示します。

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="card-image-1.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">

以上がBootstrap 4 のフレックスボックス グリッドとカード列を使用して組積造レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。