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

Bootstrap 4 中使用Flexbox 網格的磚石列佈局

雖然Bootstrap 4 中的Flexbox 網格系統方面提供了多功能性，但事實確實如此該列最初以相同的高度顯示。但是，可以使用「卡片列」功能實現磚石列佈局。

卡片列

如Bootstrap 4 文件中所述，「卡片可以是透過將它們包裝在.card-columns 中，僅使用CSS 組織成類似磚石的列。

要建立磚石列佈局，只需將 .card 元素包裝在 .card-columns 容器中即可。然後，卡片將動態地自行排列，其高度由其內容決定。

這種方法保持了 Bootstrap 的 Flexbox 網格的簡單性和響應能力，同時仍提供所需的磚石效果。

範例

下面是一個程式碼範例，示範如何使用卡片列來建立砌體佈局：

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card content</p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Another card title</h5>
        <p class="card-text">More card content</p>
      </div>
    </div>
    <!-- Additional cards can be added as needed -->
  </div>
</div>

透過使用卡片列，您可以利用Bootstrap 4 的Flexbox 網格系統輕鬆實現所需的磚石列佈局。

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