如何覆寫連續超過 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中文網其他相關文章！