Css 当上面的列具有不同高度时，引导列向左浮动

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

全屏显示：

当屏幕变小时：

应该如何：

HTML:

正文
正文
正文
正文

编辑：在两个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-->`

`
`

查看响应列重置

见：

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

<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断点的清除。

您应该尝试将div设置为相同的高度，然后如果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>

---

希望这有帮助

缺少

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>

.col-xs-12.col-sm-6.col-md-8
.col-xs-6.col-md-4
.col-xs-6.col-sm-4
.col-xs-6.col-sm-4
.col-xs-6.col-sm-4

---

在XS中，使用clearflix是可选的，而在这些大小上，clearflix不是可选的。你的SM区块数是24。确保在计数达到12后仅为SM创建clearflix。

您是正确的，但必须在class=row div内。是的，这是正确的，但col-xs-12是多余的，在最后一个最小宽度下的任何内容都将为100%，并保留所有列样式。试试看。

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

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