当上面的列具有不同的高度时，Bootstrap列浮动到左侧

Question

我有4个div，在全屏模式下以直线对齐。 当屏幕较小时，它们会响应。 但是有一个小问题：如果其中一个div比其他div重一点，那么响应性就不那么美了。

全屏：

当屏幕变小时：

它应该如何：

HTML：

<div class="col-xs-12 col-sm-6 col-md-3">
    <div class="coloured_circle indianred">
      <img src="../images/3.png" alt=""/>
    </div>
      TEXT
    <div class="red_bottom_border"></div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
    <div class="coloured_circle lightskyblue">
      <img src="../images/9.png" alt=""/>
    </div>
       TEXT
    <div class="blue_bottom_border"></div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
    <div class="coloured_circle lightgreen">
      <img src="../images/12.png" alt=""/>
    </div>
       TEXT
    <div class="green_bottom_border"></div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
    <div class="coloured_circle cornflowerblue">
      <img src="../images/14.png" alt=""/>
    </div>
       TEXT
    <div class="cornflowerblue_bottom_border"></div>
</div>

编辑：在2个div之后放置<div class="clearfix visible-sm-block"></div>。 使用ng-repeat时，请使用我写的代码：

`<div class="clearfix visible-XX-block" ng-if="$index%2==1"></div><!--For col-XX-6 class-->
 <div class="clearfix visible-XX-block" ng-if="$index%3==2"></div><!--For col-XX-4 class-->
 <div class="clearfix visible-XX-block" ng-if="$index%4==3"></div><!--For col-XX-3 class-->
 <div class="clearfix visible-XX-block" ng-if="$index%6==5"></div><!--For col-XX-2 class-->`

Answer 1

看看响应式列重置。

请参阅：http://getbootstrap.com/css/#grid-responsive-resets

在您的情况下，您可以在第二列之后添加以下代码：

<div class="clearfix visible-sm-block"></div>

所以你的代码看起来像这样：

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="coloured_circle indianred">
          <img src="../images/3.png" alt=""/>
        </div>
          TEXT
        <div class="red_bottom_border"></div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="coloured_circle lightskyblue">
          <img src="../images/9.png" alt=""/>
        </div>
           TEXT
        <div class="blue_bottom_border"></div>
    </div>

    <div class="clearfix visible-sm-block"></div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="coloured_circle lightgreen">
          <img src="../images/12.png" alt=""/>
        </div>
           TEXT
        <div class="green_bottom_border"></div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="coloured_circle cornflowerblue">
          <img src="../images/14.png" alt=""/>
        </div>
           TEXT
        <div class="cornflowerblue_bottom_border"></div>
    </div>

</div>

请注意，这不会更改列的高度，但会修复sm断点的清除。

Answer 2

您应该尝试将div设置为相同的高度然后添加滚动条，如果它们的内容太大而不适合它们。

例如，这应该是：

<div class="col-xs-12 col-sm-6 col-md-3 box-container">
  <div class="coloured_circle indianred">
    <img src="../images/3.png" alt=""/>
  </div>
    TEXT
  <div class="red_bottom_border"></div>
</div>

在css中：

.box-container { 
   height: 100px;
   overflow: auto; 
}

希望这有帮助！

Answer 3

您错过了class=row div。您必须了解，在每个设备上，您的cols编号必须等于每行12。另请注意，如果超过12，您将会遇到这种奇怪的行为。

因此，为了解决这个问题，您需要执行以下操作：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div  class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

在XS中，可以选择使用clearflix，尺寸clearflix不是可选的。您的SM块数为24.确保在计数达到12后为SM创建一个clearflix。