首頁 >web前端 >css教學 >Bootstrap 3 真的可以有超過 12 列的連續列嗎?

Bootstrap 3 真的可以有超過 12 列的連續列嗎?

Barbara Streisand
Barbara Streisand原創
2024-10-31 15:33:42569瀏覽

Can Bootstrap 3 Really Have More Than 12 Columns in a Row?

Bootstrap 3:連續使用超過12 列

提供的程式碼片段覆蓋Bootstrap 3 對於大型列組的行為,允許您連續使用超過12 列。但是,需要澄清的是,Bootstrap 並沒有嚴格限制每行 12 列。

根據 Bootstrap 文檔,單行中可以包含超過 12 列。但是,如果超過此限制,多餘的列將作為一個單元換行到新行。這種「列換行」對於保持網格系統的反應特性是必要的。

要示範此行為,請考慮以下程式碼範例:

<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>

在此範例中,有 14 個列,超出了 12 的典型限制。但是,請注意,列仍然顯示正確並換行,從而保持響應式佈局。

因此,不需要在原始貼文中。 Bootstrap 已經允許您連續使用超過 12 列,前提是您考慮「列換行」行為。

以上是Bootstrap 3 真的可以有超過 12 列的連續列嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn