如何用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 即可。 .card-columns 容器中的元素。

示例代码

这是使用 Bootstrap 4 的卡片列功能的砖石布局示例：

<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>

登录后复制

通过合并此卡片列功能，您可以轻松创建砖石布局，而无需需要自定义 CSS 或 Flexbox 安排。

以上是如何用Bootstrap 4的卡片栏实现砖石布局？的详细内容。更多信息请关注PHP中文网其他相关文章！