覆盖 Bootstrap 的列浮动行为以实现不受限制的列计数
Bootstrap 3 强制规定连续的最大列数为 12，但有时您可能会需要使用更多。默认情况下，宽度为 12 个单位的列（col-xs-12、col-sm-12 等）不浮动，这可能会干扰同一行中的其他浮动列。
要解决这样，可以应用覆盖类来允许任意数量的列正确浮动。
<code class="css">/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
float: left;
}
/* col-sm float fix for large column groups */
@media (min-width: 768px) {
.large-group .col-sm-12 {
float: left;
}
}
/* col-md float fix for large column groups */
@media (min-width: 992px) {
.large-group .col-md-12 {
float: left;
}
}
/* col-lg float fix for large column groups */
@media (min-width: 1200px) {
.large-group .col-lg-12 {
float: left;
}
}</code>此覆盖可确保具有“large-group”类的行中的所有列都将浮动，无论其宽度如何.
示例用法：
<code class="html"><div class="container">
<div class="row large-group" style="background-color:#ebebeb;">
<div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>
<div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>
<div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>
</div>
</div></code>虽然通常不建议绕过 Bootstrap 的设计原则，但此覆盖可以在创建内容丰富的布局时提供更大的灵活性。
以上是如何覆盖连续超过 12 列的 Bootstrap 列浮动行为？的详细内容。更多信息请关注PHP中文网其他相关文章！
