Why Does My Bootstrap XS Column Wrap Incorrectly at Extremely Small Screen Sizes?

Fixing Bootstrap XS Column Wrap Issue

Bootstrap's grid system can encounter an issue where the last XS-sized column wraps improperly when the screen width becomes exceptionally small. Despite configuring columns to add up to 12, the alignment behavior may not adhere to expectations.

For instance, consider the following code:

<code class="html"><div class="container">
    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-1 col-xs-offset-8"></div>
        <div class="col-xs-1"></div>
    </div>
</div></code>

Ordinarily, upon reducing the screen size, the last column should stack vertically at the end of the screen. However, as the screen diminishes beyond a critical threshold, the column unexpectedly wraps towards the beginning.

Some users have contemplated adding CSS code to specify a minimum width for the container. However, an alternative solution exists within Bootstrap.

Issue Explanation

This behavior stems from a known issue, documented in GitHub (https://github.com/twbs/bootstrap/issues/13221). At screen widths narrower than 360px, .col-xs-1 columns begin to wrap because the column's width is set to 8.333333%, while the padding on either side amounts to 15px. This asymmetry causes a discrepancy, leading the browser to stack the columns.

Avoiding the Problem

To prevent the wrapping, refrain from using .col-xs-1 on extremely small screens. Additionally, evaluate whether the screen is likely to realistically be resized below 360px. In most scenarios, this is not a frequent occurrence.

Note: In Bootstrap 4, .col-xs-1 has been replaced with .col-1.

Related Issues:

• [Bootstrap grid breaks in smallest size](https://stackoverflow.com/questions/21023320/twitter-bootstrap-3-grid-breaks-in-smallest-size)

The above is the detailed content of Why Does My Bootstrap XS Column Wrap Incorrectly at Extremely Small Screen Sizes?. For more information, please follow other related articles on the PHP Chinese website!