我目前正在使用 Bootstrap 遇到不规则的列换行行为。包裹在我的行中的一些列 float 到容器的顶部,而不是前一个元素的下方。
根据 Bootstrap 文档:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
例如,我有:
<div class="container-fluid">
<div class="row first">
<div class="col-sm-6 col-md-3">
Col 1
</div>
<div class="col-sm-6 col-md-3">
Col 2
</div>
<div class="col-sm-6 col-md-3">
Col 3
</div>
<div class="col-sm-6 col-md-3">
Col 4
</div>
<div class="col-sm-6 col-md-4">
Col 5
</div>
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Panel
</div>
</div>
</div>
根据文档,最后一列的行为我认为不正确。在以下示例中调整视口(viewport)大小时 here ,您可以看到第 7 列对于小视口(viewport)有不规则的行为。该列似乎填充了父元素的宽度/高度。
有没有一种开箱即用的方法可以用 Bootstrap 解决这个问题?感觉好像我忽略了标记,但此刻我正在斗鸡眼......
最佳答案
我认为您的问题与 col-*-12
的事实有关。 Bootstrap 类不 float 。
您可以添加 float: left
使用 col-sm-12
到您的第 7 列或者您可以在 col 之前添加一个 clearfix,仅在它变为 12 的断点处可见( sm
)。
像这样:
<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
中。 .
关于css - Bootstrap 列换行 - 不规则行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40980185/