Bootstrap 列包装 - 不规则行为

Question

我目前正在使用 Bootstrap 遇到不规则的列换行行为。包裹在我的行中的一些列浮动到容器的顶部，而不是前一个元素的下方。

根据 Bootstrap 文档：

如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行到一个新行。

例如，我有：

   <div class="container-fluid">

  <div class="row first">
    <div class="col-sm-6 col-md-3">
      Col 1
    </div>
    <div class="col-sm-6 col-md-3">
      Col 2
    </div>
    <div class="col-sm-6 col-md-3">
      Col 3
    </div>
    <div class="col-sm-6 col-md-3">
      Col 4
    </div>
    <div class="col-sm-6 col-md-4">
      Col 5
    </div>
    <div class="col-sm-6 col-md-4">
      Col 6
    </div>
    <div class="col-sm-12 col-md-4">
      Col 7
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      Panel
    </div>
  </div>
</div>

根据文档，最后一列的行为是我认为不正确的。当您在下面的例子中调整视在这里，你可以看到，第7列有对小视窗不规则行为。该列似乎填充了父元素的宽度/高度。

有没有开箱即用的方法来使用引导程序解决这个问题？感觉好像我忽略了标记，但此刻我正在斜视......

Answer 1

我认为您的问题与col-*-12引导类不浮动的事实有关。

您可以将 a 添加float: left到您的第 7 列，col-sm-12或者您可以在仅在断点处可见的 col 之前添加 clearfix ( sm)。

像这样：

    <div class="col-sm-6 col-md-4">
          Col 6
        </div>

        <div class="clearfix visible-sm"></div>

        <div class="col-sm-12 col-md-4">
          Col 7
        </div>

你可以看到这个小提琴

但这样做可能更干净：

 <div class="col-xs-12 col-md-4 pull-left">
      Col 7
    </div>

这是该解决方案的演示。

重载行时可能会遇到很多问题，因此通常建议尽可能避免它并将内容包装在.rows.