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(an +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>