Bootstrap栅格系统中的col-xs类去哪了
Bootstrap 5 还有没有 col-xs-*？
答案是明确的：没有了。col-xs-* 这个类在 Bootstrap 5 里被彻底移除了，既不是改名，也不是标记为弃用，而是直接从源码里删得一干二净。这可以说是从 Bootstrap 4 升级到 v5 时，前端开发者最容易踩中的“兼容性地雷”之一。
那现在怎么写“超小屏全宽”？
很简单，用 col-* 就行。它现在扮演了原来“xs”的角色，但语义上更精准：**它是适用于所有设备（包括超小屏）的默认栅格类**，而且不再需要任何断点前缀。
- 以前
col-xs-12（v4） → 现在直接写col-12（v5） - 以前
col-xs-6 col-sm-4（v4） → 现在改成col-6 col-sm-4（v5） - 这里有个关键点：
col-系列（比如col-4）会在所有屏幕宽度下生效，而col-sm-*及以上的类，才从对应的断点开始起作用。
为什么删掉 col-xs-*？
这背后是 Bootstrap 5 设计哲学的一次彻底转向：拥抱「移动优先 + 无默认断点」。在新的逻辑里，col-* 就是最基础的栅格层，后续的 sm、md 等断点类只是在它之上的覆盖和增强。这样一来，逻辑更扁平，代码也少了冗余。
- 在 v4 里，
col-xs-*的效果其实和不写断点前缀完全一样，那个“xs”前缀多少有点多余。 - v5 干脆把这个隐式的默认规则显式化，直接用
col-*来表示，同时把最小的断点sm提升到了576px（原来 xs 的范围被合并了）。 - 所以，如果你在 v5 项目里不小心写了
col-xs-6，浏览器压根不认识这个类，对应的列就会退化成普通的块级元素（宽度100%，不参与栅格计算），布局很可能就乱了。
升级时最容易漏掉的三件事
很多人在升级时，只记得把类名改掉，却忽略了配套的结构和JS行为的变化，结果就是栅格布局“看起来不对劲”。
- 容器结构不能省：必须确保外层有
container或container-fluid，里面包着row，再往里放col-*。少一层都不行，负边距（margin）和内边距（padding）的抵消机制会失效，列就可能从容器里溢出去。 - 响应式类的顺序有讲究：比如
col-12 col-md-6表示“所有屏幕占满整行，在≥768px的中等屏幕以上占一半”。反过来写col-md-6 col-12虽然通常也行，但如果你只写了col-md-6而没写col-，那么在小屏下，列就会变成默认的100%宽度（这不是栅格系统在控制，而是元素的默认流式行为）。 - 动态内容别忘了：通过 AJAX 加载后动态插入的 DOM（比如用
append()添加的带col-*类的元素），其布局不会自动重新计算。不过别紧张，栅格本质是纯CSS行为，一般不需要手动触发重排。但是，如果你用到了Modal（模态框）或Tooltip（工具提示）这类Bootstrap的JS组件，那相关的Ja vaScript初始化步骤可能就需要手动补上了。
话说回来，Bootstrap 5 的栅格系统表面上看是简化了，但恰恰是这个 col- 默认层，最容易成为思维盲区——写还是不写它，直接决定了你的网站在小屏幕设备上，到底听不听话。
