如何使用 Bootstrap 4 的 Flexbox 網格和卡片列建立 Masonry 佈局？-css教學-PHP中文網

如何使用 Bootstrap 4 的 Flexbox 網格和卡片列建立 Masonry 佈局？

Mary-Kate Olsen

發布： 2024-12-09 10:51:10

原創

908 人瀏覽過

How Can I Create a Masonry Layout with Bootstrap 4's Flexbox Grid and Card Columns?

使用 Bootstrap 4 Flexbox 網格實現砌體佈局

使用 Bootstrap 4 的 Flexbox 網格系統創建具有等高列的砌體佈局可能具有挑戰性。但是，您可以透過一些內建的 Bootstrap 類別有效地實現它。

卡片列功能

Bootstrap 4 提供了卡片列功能，該功能利用 CSS 列屬性來像磚石網格一樣對齊卡片。此方法簡化了對齊過程，並防止卡片跨列。

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

登入後複製

將卡片設定為內聯塊

為了防止卡片跨列，建議將其設定為顯示：卡列容器內的內聯塊。這是因為預設的 column-break-inside:void 樣式並不完全可靠。

.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 的 Flexbox 網格和卡片列建立 Masonry 佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！