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

How to Prevent Stacking in Bootstrap Grid with Fixed Wrapper

In Bootstrap, the grid system allows columns to stack responsively according to the viewport width. However, this behavior can be undesirable in certain scenarios, such as when using a fixed-width container.

To prevent columns from stacking in a fixed-width container, it is necessary to employ non-stacking classes.

Using col-xs-* for Bootstrap 3

In Bootstrap 3, the col-xs-* class should be utilized to define columns that will not stack. The xs (extra small) breakpoint represents the smallest screen size and is used to control the behavior at the most extreme resolutions.

For example:

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

Using col-* for Bootstrap 4

In Bootstrap 4, the col-xs-* class is no longer required. Instead, the col-* class without a breakpoint prefix can be used directly to define non-stacking columns:

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

Implementation

By incorporating the appropriate non-stacking classes into the grid system, you can effectively prevent columns from stacking up when the browser window is resized, ensuring that the layout remains intact within the fixed-width container.

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