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

Bootstrap 3: Using More Than 12 Columns in a Row

The provided code snippet overrides Bootstrap 3's behavior for large column groups, allowing you to use more than 12 columns in a row. However, it's important to clarify that Bootstrap does not strictly limit you to 12 columns per row.

According to the Bootstrap documentation, you can have more than 12 columns in a single row. However, if you exceed this limit, the extra columns will wrap onto a new line as a single unit. This "column wrapping" is necessary to maintain the responsive nature of the grid system.

To demonstrate this behavior, consider the following code example:

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

In this example, there are 14 columns, which exceed the typical limit of 12. However, notice that the columns still display correctly and wrap onto a new line, maintaining the responsive layout.

Therefore, there is no need for the custom overrides provided in the original post. Bootstrap already allows you to use more than 12 columns in a row, provided that you consider the "column wrapping" behavior.

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