为什么我的 Bootstrap XS 列在极小的屏幕尺寸下无法正确换行？

修复 Bootstrap XS 列换行问题

当屏幕宽度变得异常小时，Bootstrap 的网格系统可能会遇到最后一个 XS 大小的列换行不正确的问题。尽管将列配置为最多 12 列，但对齐行为可能不符合预期。

例如，考虑以下代码：

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

通常，在减小屏幕尺寸时，最后一列应垂直堆叠在屏幕末端。然而，当屏幕缩小到超过临界阈值时，该列会意外地向开头换行。

一些用户已考虑添加 CSS 代码来指定容器的最小宽度。但是，Bootstrap 中存在替代解决方案。

问题说明

此行为源于 GitHub 中记录的已知问题 (https://github.com/twbs) /bootstrap/issues/13221）。当屏幕宽度小于 360 像素时，.col-xs-1 列开始换行，因为该列的宽度设置为 8.333333%，而两侧的填充量为 15 像素。这种不对称会导致差异，导致浏览器堆叠列。

避免问题

要防止换行，请避免在上使用 .col-xs-1非常小的屏幕。此外，评估屏幕大小是否可能实际调整到 360 像素以下。在大多数情况下，这种情况不会经常发生。

注意：在 Bootstrap 4 中，.col-xs-1 已替换为 .col-1。

相关问题：

• [Bootstrap 网格以最小尺寸分隔](https://stackoverflow.com/questions/21023320/twitter-bootstrap-3-grid-breaks-in -最小尺寸）

以上是为什么我的 Bootstrap XS 列在极小的屏幕尺寸下无法正确换行？的详细内容。更多信息请关注PHP中文网其他相关文章！