Bootstrap 4 的 Flexbox 网格可以创建 Masonry 布局吗？

使用 Bootstrap 4 Flexbox 网格进行砖石布局

Bootstrap 4 使用 Flexbox 网格系统进行列布局。然而，一些用户可能想知道是否可以使用此 Flexbox 网格创建砖石布局，其中列具有不同的高度。

答案是肯定的，对于标准 Bootstrap 4 类来说这是可行的。该文档包含有关启用此功能的卡片列的专门部分。

卡片列功能

如 Bootstrap 4 文档中所述：

"通过将卡片包装在 .card-columns 中，可以仅使用 CSS 将卡片组织成类似于 Masonry 的列。卡片是使用 CSS 列属性构建的。 Flexbox 的排列方式更容易对齐。”

实现

要使用卡片列功能，只需包装您的 .cards进入 .card-columns

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

注意事项

请记住，使用卡片列可能并不适合所有情况。为了防止卡片跨列，建议将其显示属性设置为 inline-block。然而，column-break-inside：避免 CSS 属性还不是一个完全可靠的解决方案。

以上是Bootstrap 4 的 Flexbox 网格可以创建 Masonry 布局吗？的详细内容。更多信息请关注PHP中文网其他相关文章！