如何覆寫 Bootstrap 3 的連續 12 列限制？

Bootstrap 3：解決行中的列限制

Bootstrap 3 的預設行為將一行中的列數限制為12，從而在以下情況導致問題試圖超越這個限制。動態添加多個內容區塊時可能會發生這種情況，從而導致不必要的重疊。

重寫 Bootstrap 的行為

要解決此限制，可以建立一個自訂類別來重寫Bootstrap 的預設行為允許連續超過 12 列。此類別可以應用於 .row 容器。

響應性注意事項

雖然單行中允許超過 12 列，但必須考慮響應性。 Bootstrap 利用列換行來確保列在不同螢幕尺寸上保持對齊。

範例程式碼

以下程式碼示範了自訂類別的實現，確保列正確浮動當連續超過12 個單位時：

<code class="css">.large-group .col-xs-12 {
  float: left;
}

@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

@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 3 的連續 12 列限制？的詳細內容。更多資訊請關注PHP中文網其他相關文章！