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，或者当视口达到“小”尺寸时，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; }
}

等。