Bootstrap：停止第二列

Question

我有三个不同高度的列（lg-box，md-box和sm-box）。我想在下一行显示＃7列，但不确定为什么它填满了空白空间并且出现了在第6栏下面。它应该显示在下一行。当我有少于7列或超过8列时，它工作正常，但只有当我有7列时才会产生问题。是否可以停止填充第6列的空白区域？

以下是fiddle

HTML

<div class="col-xs-2 lg-box">1</div>
<div class="col-xs-2 lg-box">2</div>
<div class="col-xs-2 lg-box">3</div>
<div class="col-xs-2 lg-box">4</div>
<div class="col-xs-2 lg-box">5</div>
<div class="col-xs-2 md-box">6</div>
<div class="col-xs-2 sm-box">7</div>

CSS

.col-xs-2{
    border:2px solid white;
    box-sizing: border-box;
}
.lg-box{
    background-color: red;
    height: 200px;
}
.md-box{
    background-color: red;
    height: 120px;
}
.sm-box{
    background-color: green;
    height: 60px
}

Answer 1

编辑：如果您担心与此答案相关的旧浏览器支持，请考虑使用flexbox polyfill，例如https://github.com/jonathantneal/flexibility

您还可以使用bootstrap的行类来声明新行。

<div class="row">
  <div class="col-xs-2 lg-box">1</div>
  <div class="col-xs-2 lg-box">2</div>
  <div class="col-xs-2 lg-box">3</div>
  <div class="col-xs-2 lg-box">4</div>
  <div class="col-xs-2 lg-box">5</div>
  <div class="col-xs-2 md-box">6</div>
</div>
<div class="row">
   <div class="col-xs-2 sm-box">7</div>
</div>

https://jsfiddle.net/wumnLz96/1/

如果要保留动态列数，请使用flex容器来包装它们。

<div class="row">
  <div class="col-xs-2 lg-box">1</div>
  <div class="col-xs-2 lg-box">2</div>
  <div class="col-xs-2 lg-box">3</div>
  <div class="col-xs-2 lg-box">4</div>
  <div class="col-xs-2 lg-box">5</div>
  <div class="col-xs-2 md-box">6</div>
  <div class="col-xs-2 sm-box">7</div>
</div>

.col-xs-2{
    border:2px solid white;
    box-sizing: border-box;
}
.lg-box{
    background-color: red;
    height: 200px;
}
.md-box{
    background-color: red;
    height: 120px;
}
.sm-box{
    background-color: green;
    height: 60px
}
.row{ 
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

https://jsfiddle.net/wumnLz96/2/

Answer 2

使用clear停止左侧的浮动元素。

<div class="col-xs-2 sm-box" style="clear: left;">7</div>

Answer 3

在上一栏之前添加clearfix，如下所示：

<div class="clearfix visible-xs-block"></div>
<div class="col-xs-2 sm-box">7</div>

这将很清楚，允许您控制clearfix可见性，以及不同媒体大小的列数。

例如，请参阅jsFiddle。