Bootstrap Column Wrapping - 不规则行为

Question

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

根据Bootstrap文档：

  

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

例如，我有：

sprintf_s

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

是否有开箱即用的方法来解决这个问题？感觉我正在俯瞰标记，但此刻我正在睁眼...

Answer 1

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

您可以使用float: left向{7}列添加col-sm-12，也可以在col仅在断点处显示为col（12 sm）之前添加clearfix。 / p> 像这样：

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