首頁  >  文章  >  web前端  >  如何在 Bootstrap 3 行中使用超過 12 列?

如何在 Bootstrap 3 行中使用超過 12 列?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-02 06:28:30569瀏覽

How to Use More Than 12 Columns in a Bootstrap 3 Row?

Bootstrap 3 - 在一行中使用超過12 列

覆蓋過多列的浮動行為

在Bootstrap 3 中,.row div 通常是包含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>

為什麼使用超過12 欄?

最初,連續使用超過12 列可能看起來違反直覺,但它實際上是為了保持反應能力。 Bootstrap 文件指出:

「如果在一行中放置超過12 列,則每組額外的列將作為一個單元換行到新行。」

例如,當螢幕尺寸縮小時,單行有24 列將導致兩行各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>

以上是如何在 Bootstrap 3 行中使用超過 12 列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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