Css 引导列包装-不规则行为

我目前在引导中遇到不规则的列包装行为。“我的行”中的某些换行列浮动到容器的顶部，而不是上一个元素的下方

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

第1列
第2列
第3列
第4列
第5列
第6栏
第7栏
面板

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

---

有没有现成的方法可以通过引导解决这个问题？感觉好像我忽略了标记，但我现在正在斜视…

我认为您的问题与

col-*-12

引导类不浮动这一事实有关

您可以使用

col-sm-12

将

float:left

添加到第7列中，也可以在col之前添加一个clearfix，该col仅在断点处可见，此时它变为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>

第6栏
第7栏

你可以看到

但这样做可能更干净：

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

第7栏

下面是该解决方案的一个例子

---

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

中。行
第7列的行为不规则是什么意思？第7列的行为不规则是
col-sm-12
类。您对此有何看法？请查看上述问题中的JSFIDLE示例并更改视口大小。这里是链接：您将看到第7列获取父元素的完整高度/宽度。一切正常。没有任何错误。第七个可以填满整行，但不是全高。第一个解决方案非常有效！第二种解决方案似乎存在宽度不是父元素（xtra小视口）的100%的问题。@Dustin Oh抱歉，第二种解决方案需要
col-xs-12
，而不是
col-sm-12
，以便在较低的屏幕上达到100%的宽度。如果您愿意使用该解决方案，我已经更新了我的答案，并对这些更改进行了修改。