我正在尝试生成引导程序（v3.0.3）网格布局。数据是使用以下代码动态生成的：
<div class="row">
@foreach (var Node in Model.Tour.Nodes)
{
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
@Node.SomeData
</div>
</div>
}
</div>
不幸的是，有时某些列不能正确清除，因为其中一列的高度比另一列高，而我得到的是这样的：
我知道有一种方法可以通过在新行应开始的地方添加clearfix类来解决此问题：
<div class="clearfix visible-xx"></div>
但是当内容是动态生成时，我无法真正做到。
是否有针对此类问题的解决方案，或者由于我是新手，所以我的方法是错误的。
最佳答案
当内容是动态生成时，我真的做不到。
编辑4/29/2016
最新解决方案：http://jsfiddle.net/silb3r/3hzmwbt0/
第一个解决方案（仍在下面）在很大程度上依赖于更改HTML标记。这是不可取的，因为：（1）它不是语义的； （2）空元素不好； （3）这将影响您在列上有效使用nth-child选择器的能力。
这些只是为什么我将其快速版本汇总为仅依靠CSS而不在标记中包含任何clearfix元素的一些原因。
最新的解决方案以各种视口宽度为目标并清除列的左侧。
使用以下语法：nth-child( a n + b )a =在该视口显示的列数b = a + 1
结束编辑
当然可以！您需要跟踪缩略图计数，并相应地输出不同的clearfix。在您的示例中，您将需要：
每两列缩略图列后<div class="clearfix visible-sm-block"></div>
每三列缩略图后的<div class="clearfix visible-md-block"></div>
每四列缩略图后<div class="clearfix visible-lg-block"></div>
您应该能够创建一个设置为0的索引变量，并在每次使用模运算符输出正确的clearfix时在循环中对其进行迭代。
当在缩略图列之后出现多个clearfix时，您绝对可以组合可见性类，如我在以下工作示例中所做的：http://jsfiddle.net/silb3r/jtg7sn9z/。
编辑
更新了工作示例（http://jsfiddle.net/silb3r/jtg7sn9z/1/）和以下代码，以反映新的Bootstrap可见性类，该类现在包括盒模型。
例：
<div class="row">
@for(var i = 0; i < Model.Tour.Nodes.Length; i++) {
var Node = Model.Tour.Nodes[0];
if(i % 2 == 0) {
<div class="clearfix visible-sm-block"></div>
}
if(i % 3 == 0) {
<div class="clearfix visible-md-block"></div>
}
if(i % 4 == 0) {
<div class="clearfix visible-lg-block"></div>
}
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
@Node.SomeData
</div>
</div>
}
</div>
关于twitter-bootstrap - Bootstrap 3网格布局动态生成的列未清除正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21444053/