css - Bootstrap 列换行 - 不规则行为

Question

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

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

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

有没有一种开箱即用的方法可以用 Bootstrap 解决这个问题？感觉好像我忽略了标记，但此刻我正在斗鸡眼......

Answer 1

我认为您的问题与 col-*-12 的事实有关。 Bootstrap 类不 float 。

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

你可以看到 this fiddle

但这样做可能更干净:

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

这里是 a demo那个解决方案。

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