Bootstrap 4 の Flexbox Grid を使用して組積造レイアウトを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

Bootstrap 4 の Flexbox Grid を使用して組積造レイアウトを実現するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-19 13:13:09

オリジナル

549 人が閲覧しました

How to Achieve a Masonry Layout Using Bootstrap 4's Flexbox Grid?

フレックスボックスグリッドを使用して Bootstrap 4 で石積みのレイアウトを作成する方法

Bootstrap 4 では、フレックスボックスを利用して石積みの柱のレイアウトを実現できます。 カード列を活用したグリッド

解決策:

以下に示すように、カード要素を .card-columns コンテナーでラップします:

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

ログイン後にコピー

説明:

.card-columns クラスは、CSS 列を使用してカードを上から下、左から右に配置します。
カードは列をまたいで分割されないようにインラインブロックで表示されます。
列-break-inside: 回避はまだ完全な解決策ではありません。依然として列の不一致が発生する可能性があります。

例:

次の HTML を考えてみましょう:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="card-image-1.jpg" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="card-image-2.jpg" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Another card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="card-image-3.jpg" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card with long title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="card-image-4.jpg" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Another card with even more text</h5>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

ログイン後にコピー

これにより、カードを含む石積みのレイアウトが生成されます。コンテンツの高さに基づいて配置し、視覚的に魅力的でダイナミックなグリッドを作成します。

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