Bootstrap 4 masonry item 使用卡片列跨越多个列答案

【问题标题】：Bootstrap 4 masonry item to span multiple columns using card-columnsBootstrap 4 masonry item 使用卡片列跨越多个列
【发布时间】：2019-11-18 04:26:48
【问题描述】：

我正在阅读使用 card-columns 的 Bootstrap 4 的 masonry 布局，它工作得很好，但是砌体item 也可以跨越多个列，以及？现在，似乎每个项目都被限制在自己的列中，而没有跨越两列或更多列的灵活性。我画了一个小草图来帮助更好地澄清我的问题：

在此草图中，您可以看到蓝色项目跨越多列，而其他项目位于各自的列中。我查看了column-count CSS 属性，但我不确定这在这种情况下有何帮助。那么使用card-columns 的Bootstrap 4 masonry 网格布局是否可行？感谢您的帮助！

【问题讨论】：

所有物品的高度都一样吗？如果他们是你不需要使用卡片列/砌体

标签： bootstrap-4

【解决方案1】：

我想通了。我只需要嵌套另一个 card-columns 就可以了。

.card-columns
  .card // Item 1
  .card // Item 2
  .card-columns // Item 3 and 4 card-columns wrapper
    .card // Item 3
    .card // Item 4
  .card // blue item

【讨论】：