如何在 Bootstrap 3 行中使用超过 12 列？

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中文网其他相关文章！