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

Bootstrap 3 - Using More than 12 Columns in a Row

Overriding Float Behavior for Excessive Columns

In Bootstrap 3, a .row div typically contains 12 columns, and additional columns are not floated by default. This can cause wider columns to overlap smaller ones.

To address this, a custom class can be used to override the float behavior of excessive columns:

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

Why Use More than 12 Columns?

Initially, using more than 12 columns in a row may seem counterintuitive, but it actually serves a purpose in maintaining responsiveness. The Bootstrap documentation states:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line."

For example, having 24 columns in a single row would result in two rows of 12 columns each when the screen size is reduced.

Example Usage

Here's an example showing how to use the custom class:

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

The above is the detailed content of How to Use More Than 12 Columns in a Bootstrap 3 Row?. For more information, please follow other related articles on the PHP Chinese website!