在Bootstrap 3.2.0中使用网格列创建问题

Question

我在页面上有以下布局（使用Bootstrap 3.2.0）：

此处，动态生成列＆amp;列中的内容。但是，在这里，为我创建以下问题。

我该如何解决？非常感谢帮助。

Answer 1

查看Responsive column resets

在具有不同高度的列之后使用如下所示的块可能会解决您的问题：

 <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

这将在调整大小和布局时正确地隔开列。

或者，作为一种不同的解决方案，通过使用

包装所需的列来分离列

<div class="row">...</div>

Answer 2

在第六列之后，关闭<div class="row">并立即重新打开一个新列，以便每行分开。

  <div class="row">
    <div class="col-lg-2">1</div>
    <div class="col-lg-2">2</div>
    <div class="col-lg-2">3</div>
    <div class="col-lg-2">4</div>
    <div class="col-lg-2">5</div>
    <div class="col-lg-2">6</div>
  </div>
  <div class="row">
    <div class="col-lg-2">7</div>
    <div class="col-lg-2">8</div>
    <div class="col-lg-2">9</div>
    <div class="col-lg-2">10</div>
    <div class="col-lg-2">11</div>
    <div class="col-lg-2">12</div>
  </div>

Answer 3

如果您要生成列，则可以使用某个计数器和i%7添加.clear-left类：

.clear-left { clear: left; }

如果它是静态的，则包围每一行：

<div class="row">
...
</div>
<div class="row">
...
</div>

Answer 4

正如其他人已经指出的那样，这显然是一个浮动/明确的问题。

您可以使用nth-child选择器为您进行清算。 http://css-tricks.com/how-nth-child-works/1

这样的事情可以解决问题：

.col-lg-2:nth-child(6n+1) {
   clear: both;
}

此方法的优点是您无需通过添加额外的包装器div或空的clearfix元素来更改标记。浏览器支持应该没问题：http://caniuse.com/#search=nth-child