How to Prevent Bootstrap Grid Columns from Stacking in Fixed-Width Containers?

Bootstrap Grid System: Overcoming Column Stacking with Fixed Wrappers

Bootstrap's grid system is a fundamental component in web design for creating responsive layouts. However, when using a fixed-width container, columns within the grid can stack vertically at smaller browser sizes.

The Issue:

When using a fixed-width wrapper in Bootstrap 3, the grid columns will collapse and stack on top of each other when the browser window is resized, even if the wrapper itself remains the same size.

The Solution: Using Non-Stacking Classes

To prevent columns from stacking in fixed-width containers, Bootstrap provides a set of "non-stacking" classes. These classes use media queries to override the default stacking behavior at specific screen resolutions.

In Bootstrap 3, the non-stacking classes are prefixed with col-xs-. These classes can be applied to columns to keep them from collapsing at smaller screen sizes.

Example:

<code class="html"><div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
  </div>
</div></code>

In this example, the columns will remain side-by-side even at the smallest screen sizes.

Bootstrap 4 Update:

In Bootstrap 4, the concept of non-stacking classes has been simplified. The xs prefix is no longer required. Instead, the default behavior is to prevent column stacking. To ensure that columns remain side-by-side, simply use the standard col classes (e.g., col-4).

The above is the detailed content of How to Prevent Bootstrap Grid Columns from Stacking in Fixed-Width Containers?. For more information, please follow other related articles on the PHP Chinese website!