Bootstrap 3 流体网格布局问题；长物品会导致堆叠问题答案

【问题标题】：Boostrap 3 Fluid Grid Layout Issue; Long items cause stacking problemsBootstrap 3 流体网格布局问题；长物品会导致堆叠问题
【发布时间】：2014-02-19 18:14:44
【问题描述】：

这与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 的一些方法？

【问题讨论】：

没有任何解决方案只能通过隐藏溢出或某些 jquery 解决方案使它们保持相同的高度。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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; }
}

等等。

【讨论】：