如何将 Bootstrap 3 行扩展到 12 列限制之外？

自定义 Bootstrap 3 以打破行中 12 列的限制

问题

默认情况下，Bootstrap 3 强制堆叠大于 12 个单位的列由于它们的“float：none”行为而垂直。此限制可能会阻碍动态布局，其中多个内容块可能会添加到一行。

解决方案

要打破此限制，您可以应用自定义 CSS 覆盖来覆盖 Bootstrap 的行为并允许行容纳超过 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>

实现示例

<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 的默认行为可确保行在视觉上保持一致，但它可能并不总是适合动态或空间受限的布局。这种定制可以在这种情况下实现更大的灵活性和响应能力。

以上是如何将 Bootstrap 3 行扩展到 12 列限制之外？的详细内容。更多信息请关注PHP中文网其他相关文章！