twitter-bootstrap 当上面的列具有不同的高度时，引导列向左浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27462628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap column floating to the left when columns above have different heights
提问by STheFox
I have 4 divs, aligning in a straight line in fullscreen mode. When the screen is smaller, they get responsive. But there is a small problem: if one of the divs has a bit more weight then the others, the responsiveness isn't that beautiful.
我有 4 个 div，在全屏模式下以直线对齐。当屏幕较小时，它们会做出响应。但是有一个小问题：如果其中一个 div 的权重比其他 div 大一点，那么响应性就不那么漂亮了。
In fullscreen:
全屏显示：
When screen gets smaller:
当屏幕变小时：
How it should be:
应该如何：
HTML:
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>
EDIT: Putting <div class="clearfix visible-sm-block"></div>after the 2 divs worked.
When using ng-repeat, use this code I wrote:
编辑：<div class="clearfix visible-sm-block"></div>在 2 个 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-->`
回答by vicente
Take a look at responsive column resets.
看看响应式列重置。
See: http://getbootstrap.com/css/#grid-responsive-resets
请参阅：http: //getbootstrap.com/css/#grid-responsive-resets
In your case you can add the following code after the second column:
在您的情况下，您可以在第二列之后添加以下代码：
<div class="clearfix visible-sm-block"></div>
So your code looks like this:
所以你的代码看起来像这样：
<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>
Note that this doesn't change the height of the columns but it fixes the clearing for the sm breakpoint.
请注意，这不会更改列的高度，但会修复 sm 断点的清除。
回答by GregC
You should try to set your divs to the same height then and add a scrollbar if their content is too big to fit in them.
您应该尝试将您的 div 设置为相同的高度，然后如果它们的内容太大而无法放入它们，则添加一个滚动条。
So for example this should be:
例如，这应该是：
<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>
And in css:
在 css 中：
.box-container {
height: 100px;
overflow: auto;
}
Hope this helps!
希望这可以帮助！
回答by rodrigogq
You are missing the class=rowdivs. You have to understand that, on each device, your cols number must be equal to 12 in each row. Also notice that if you get more than 12, you will get this weird behavior.
您缺少class=rowdiv。您必须了解，在每台设备上，您的每行列数必须等于 12。还要注意，如果你得到超过 12 个，你会得到这种奇怪的行为。
So, in order to fix that, you need to do something like:
因此，为了解决这个问题，您需要执行以下操作：
<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>
In XS it is optional to use the clearflix, on there sizes clearflix is not optional. Your SM blocks count are 24. Make sure to create a clearflix after the count reaches 12 just for SM.
在 XS 中，使用 clearflix 是可选的，在那里 clearflix 的大小不是可选的。您的 SM 块数为 24。确保在计数达到 12 后仅为 SM 创建一个 clearflix。
