How to Prevent Columns from Stacking When Using a Fixed Wrapper with Bootstrap\'s Grid System?

Bootstrap grid system combined with fixed wrapper - preventing column stacking

Problem:

Using Bootstrap 3 grid system combined When the wrapper is fixed, the columns stack together when the browser window changes size, even though the wrapper remains the same size.

Answer:

Columns like sm, md, lg in Bootstrap will wrap/stack responsively. To use non-stacked columns, you can use the col-xs-* classes.

<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: In Bootstrap 4, it is no longer necessary to specify xs .

<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 Columns from Stacking When Using a Fixed Wrapper with Bootstrap\'s Grid System?. For more information, please follow other related articles on the PHP Chinese website!