Home  >  Article  >  Web Front-end  >  How to Override Bootstrap\'s Column Float Behavior for More than 12 Columns in a Row?

How to Override Bootstrap\'s Column Float Behavior for More than 12 Columns in a Row?

DDD
DDDOriginal
2024-11-01 00:16:02654browse

How to Override Bootstrap's Column Float Behavior for More than 12 Columns in a Row?

Overriding Bootstrap's Column Float Behavior for Unrestricted Column Counts

Bootstrap 3 imposes a maximum column count of 12 in a row, but sometimes you may need to use more. By default, columns with a width of 12 units (col-xs-12, col-sm-12, etc.) do not float, which can interfere with other floating columns in the same row.

To address this, an override class can be applied to allow any number of columns to float correctly.

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

This override ensures that all columns in rows with the "large-group" class will float, regardless of their width.

Example usage:

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

Although it's generally not recommended to bypass Bootstrap's design principles, this override allows for greater flexibility in creating content-rich layouts.

The above is the detailed content of How to Override Bootstrap\'s Column Float Behavior for More than 12 Columns in a Row?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn