Bootstrap 4 的 Flexbox 網格可以創建 Masonry 佈局嗎？

使用 Bootstrap 4 Flexbox 網格進行磚石佈局

Bootstrap 4 使用 Flexbox 網格系統進行列佈局。然而，一些用戶可能想知道是否可以使用此 Flexbox 網格建立磚石佈局，其中列具有不同的高度。

答案是肯定的，對於標準 Bootstrap 4 類來說這是可行的。該文件包含有關啟用此功能的卡片列的專門部分。

卡片列功能

如Bootstrap 4 文件中所述：

"透過將卡片包裝在.card-columns 中，可以只使用CSS 將卡片組織成類似Masonry 的欄位。的排列方式更容易對齊。

注意事項

請記住，使用卡片列可能不適用於所有情況。為了防止卡片跨列，建議將其顯示屬性設為 inline-block。然而，column-break-inside：避免 CSS 屬性還不是一個完全可靠的解決方案。

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

以上是Bootstrap 4 的 Flexbox 網格可以創建 Masonry 佈局嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！