如何使用 Bootstrap 4 的 Flexbox 網格實現 Masonry 佈局？

如何使用 Flexbox 網格在 Bootstrap 4 中建立磚石佈局

在 Bootstrap 4 中，您可以利用 Flexbox實現砌體列佈局利用卡片列進行網格化

解決方案：

將卡片元素包裝在 .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="/static/imghwm/default1.png" data-src="card-image-1.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-title">Card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-2.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-title">Another card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-3.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-with-long-title">Card with long title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-4.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-with-even-more-text">Another card with even more text</h5>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

這將導致磚石佈局，其中包含卡片根據內容高度進行排列，創建一個視覺上吸引人的動態網格。

以上是如何使用 Bootstrap 4 的 Flexbox 網格實現 Masonry 佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！