Bootstrap 列换行 - 不规则行为

Question

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

根据 Bootstrap 文档：

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

比如我有：

   <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>

根据文档，最后一列的行为是我认为不正确的。当您在以下示例 here 中调整视口大小时，您可以看到第 7 列对于小视口具有不规则行为。该列似乎填充了父元素的 width/height。

有没有现成的方法可以用 bootstrap 解决这个问题？感觉我忽略了标记，但此刻我正在斜视...

Answer 1

我认为你的问题与 col-*-12 bootstrap 类不浮动有关。

您可以使用 col-sm-12 将 float: left 添加到第 7 列，或者您可以在仅在它变为 12 (sm) 的断点处可见的列之前添加一个 clearfix .

像这样：

    <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>

可以看到this fiddle

但这样做可能更干净：

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

这是该解决方案的 a demo。

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

中

Bootstrap 列换行 - 不规则行为

Bootstrap Column Wrapping - Irregular Behavior

css

grid-layout

twitter-bootstrap