css - Bootstrap 3 流体网格布局问题；长元素会导致堆叠问题

Question

这与 Bootstrap 3 fluid grid layout issues? 非常相似和 Bootstrap responsiveness view但是砌体和同位素的选项虽然很有吸引力，但不是一个选项，因为我必须保留元素的顺序。

从链接的问题中，我已经使用 clearfix 类应用程序向前迈进了一大步，如 http://bootply.com/103688 所示。 . clearfix div 未缩进，因此更加突出。

我还发现，如果像我的情况一样，我只使用某些列大小(xs、md、lg)，则会出现不良结果。这需要 clearfix 还指定 visible-sm，或者当视口(viewport)达到“小”尺寸时，clearfix 不再可见，并且会再次出现问题堆叠。

应用它们非常简单，因为这是一个真实世界的 fizzbuzz 问题，但它似乎是反 DRY 的。有没有一种更简洁的方法可以减少 clearfix 标签的重复？让浏览器 (CSS) 计算应在何处应用 clearfix 的一些方法？

Answer 1

您可以使用手动方法根据每个断点的元素数创建行。例如:

如果一行只有 2 个元素:

@media(max-width: @screen-tablet){
    // create rows (clearfix)
    .col-xs-6:nth-of-type(odd){ clear:left; }
}

或者如果您的行包含 4 个元素

@media(min-width: @screen-tablet) and (max-width: @screen-desktop){
    // create rows (clearfix)
    .col-sm-4:nth-of-type(3n+1){ clear:left; }
}

等..