How to Prevent Bootstrap Grid Columns from Stacking with a Fixed Wrapper?

Use Non-Stacking Column Classes for Bootstrap Grid with Fixed Wrapper

When using Bootstrap's grid system with a fixed wrapper, it's possible to prevent columns from stacking vertically when the browser is resized.

To achieve this, use the non-stacking col-xs-* classes specifically designed for small screens. These classes override the default responsive behavior and ensure that columns remain side-by-side within the fixed wrapper.

<code class="html"><div class="container">
  <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>

Demo: http://bootply.com/80085

Note for Bootstrap 4:

In Bootstrap 4, the xs prefix is no longer necessary for non-stacking columns. Simply use the col-* class to achieve the desired effect.

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

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