如何使用 Bootstrap 4 的 Flexbox 网格和卡片列创建 Masonry 布局？-css教程-PHP中文网

如何使用 Bootstrap 4 的 Flexbox 网格和卡片列创建 Masonry 布局？

Mary-Kate Olsen

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

原创

906 人浏览过

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中文网其他相关文章！