如何覆盖连续超过 12 列的 Bootstrap 列浮动行为？

覆盖 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中文网其他相关文章！