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

Bootstrap Grid System with Fixed Width Wrapper: Preventing Column Stacking

When utilizing the Bootstrap 3 grid system within a fixed-width wrapper, columns tend to stack vertically as browser viewport size changes. To resolve this behavior, use the col-xs-* class to render columns as non-stacking elements:

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

This code ensures that columns remain side-by-side regardless of browser size changes. Note that for Bootstrap 4, the col-xs-* class is no longer necessary:

<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 in a Fixed-Width Wrapper?. For more information, please follow other related articles on the PHP Chinese website!