Bootstrap 3网格布局动态生成的列不清楚正确

Question

我正在尝试生成一个bootstrap（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>

但是，当动态生成内容时，我无法真正做到这一点。

对于这些问题是否有任何解决方案，或者我的做法可能是错误的，因为我是新手。

Answer 1

  

当动态生成内容时，我无法真正做到这一点。

编辑2016年4月29日

最新解决方案：http://jsfiddle.net/silb3r/3hzmwbt0/

第一个解决方案（仍在下面）在很大程度上依赖于改变HTML标记。这是不可取的，因为：（1）它不是语义; （2）空元素不大; （3）它会影响您在列上有效使用nth-child选择器的能力。

这些只是为什么我把它的快速版本放在一起的几个原因，它只依赖于CSS而你的标记中没有任何clearfix元素。

最新的解决方案以各种视口宽度为目标并清除列的左侧。

使用以下语法：nth-child( a n + b )

a =您在该视口中显示的列数

b = a + 1

结束编辑

当然可以！您需要跟踪缩略图计数并相应地输出不同的clearfix。在您的示例中，您需要：

每两个缩略图列后
1. <div class="clearfix visible-sm-block"></div>
每三个缩略图列后
2. <div class="clearfix visible-md-block"></div>
每隔四个缩略图列后
3. <div class="clearfix visible-lg-block"></div>

您应该能够创建一个设置为0的索引变量，并在每次循环时迭代它，同时使用模运算符输出正确的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>

Answer 2

.row > div.col:nth-of-type(3n+1) {
    clear: both;
}

Answer 3

您可以使用以下CSS：

.row > div.col:nth-of-type(even) {
  clear: both;
}

参考： http://www.w3schools.com/cssref/sel_nth-of-type.asp

Answer 4

对于angularJS ng-repeate，我使用了以下内容：

vlookup