如何將 Bootstrap 3 行擴展到 12 列限制之外？

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

問題

預設情況下，Bootstrap 3 強制堆疊列由於它們的“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中文網其他相關文章！