如何用Bootstrap 4的卡片欄實現磚石佈局？-css教學-PHP中文網

如何用Bootstrap 4的卡片欄實現磚石佈局？

Barbara Streisand

發布： 2024-12-05 13:53:11

原創

620 人瀏覽過

How to Achieve a Masonry Layout with Bootstrap 4's Card Columns?

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

Bootstrap 4 的Flexbox 網格系統允許靈活響應靈敏的列佈局。若要建立行內專案具有不同高度的磚石柱佈局，您可以利用 Bootstrap 的卡片列功能。

使用卡片列

如Bootstrap 中所述文件：

「透過包裝卡片，只需使用CSS 即可將卡片組織成類似磚石的列在.card-columns 中，卡片是使用CSS 列屬性而不是Flexbox建造的，以便於對齊。 .card-columns 容器中的元素。

範例程式碼

這是使用Bootstrap 4 的卡片列功能的磚石佈局範例：

透過合併此卡片列功能，您可以輕鬆建立磚石佈局，而無需需要自訂CSS 或Flexbox 排程。

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <blockquote class="blockquote mb-0 card-body">...</blockquote
    </div>
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
      <blockquote class="blockquote mb-0">...</blockquote>
    </div>
    <div class="card text-center">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <img class="card-img" src="..." alt="Image">
    </div>
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">...</blockquote
    </div>
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

登入後複製

以上是如何用Bootstrap 4的卡片欄實現磚石佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！