为什么我的 Bootstrap xs 列在低于 360 像素时会环绕而不是堆叠？

Bootstrap：xs 列意外包裹

Bootstrap 框架通过提供用于创建灵活高效布局的实用程序来简化响应式设计。但是，当列的行为不符合预期时，用户有时会遇到意外问题，尤其是在超小 (xs) 大小的情况下。

问题：xs 列换行而不是堆叠

通常，当一行的列总共有 12 列，随着屏幕宽度的减小，它们应该垂直堆叠。但是，在较小的屏幕上，列可能会意外地换向屏幕的开头而不是结尾。

原因：浏览器不匹配

此行为是由于 Bootstrap 中的已知问题而引起的。在屏幕宽度小于 360 像素的情况下，宽度为 1% (col-xs-1) 的列可能无法正确放入容器中。尽管指定了 1% 宽度，但两侧的 15px 填充实际上使列变宽，导致与浏览器的布局引擎不匹配。

解决方案：在小屏幕上避免使用 col-xs-1

为避免此问题，请考虑不要在小于 360 像素的屏幕上使用 col-xs-1。确定您的应用程序是否确实预期用户将屏幕大小调整为低于此限制。

Bootstrap 4 注意

在 Bootstrap 4 中，col-xs-1 类已重命名为 col-1。上述问题仍然适用于 Bootstrap 4 中的 col-1。

以上是为什么我的 Bootstrap xs 列在低于 360 像素时会环绕而不是堆叠？的详细内容。更多信息请关注PHP中文网其他相关文章！