Bootstrap 4砌体项目可使用卡片列跨越多列

我正在使用card-columns阅读Bootstrap 4的 masonry 布局,它的效果很好,但对于砌体 item 也可以跨越多列?现在,似乎每个项目都被限制在其自己的列中,而没有跨越两列或更多列的灵活性。我画了一个草图以帮助更好地阐明我的问题:

Bootstrap 4砌体项目可使用卡片列跨越多列

在此草图中,您可以看到蓝色项目跨越一列以上,而其他项目则位于其各自的列中。我看了一下column-count CSS属性,但不确定在这种情况下这是否有帮助。那么使用card-columns进行Bootstrap 4砌体网格布局是否可行?感谢您的帮助!

lingda2009 回答:Bootstrap 4砌体项目可使用卡片列跨越多列

我知道了。我只需要嵌套另一个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
本文链接:https://www.f2er.com/3091289.html

大家都在问