Bootstrap栅格系统的col-xs类去哪了

<p>没有。Bootstrap 5 彻底移除了 col-xs-，改用无前缀的 col- 作为超小屏默认栅格类，如 col-12 替代 col-xs-12，col-6 col-sm-4 替代 col-xs-6 col-sm-4。</p>

Bootstrap 5 还有没有 col-xs-*？

没有。col-xs-* 在 Bootstrap 5 中被彻底移除了，不是改名、不是弃用警告，是直接删了。这是 Bootstrap 从 v4 升级到 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-* 实际上和没写断点效果一样，纯属冗余前缀
• v5 把这个隐式默认显式化为 col-*，同时把最小断点 sm 提升到 576px（原 xs 是
• 如果你在 v5 里写了 col-xs-6，浏览器完全不认识，该列会退化为普通块级元素（宽度 100%、无栅格计算）

升级时最容易漏掉的三件事

很多人只改了 class 名，却忽略了配套结构和 JS 行为变化，导致栅格“看起来不对”：

• 必须确保外层有 container 或 container-fluid，再包 row，再放 col-* —— 漏一层，负 margin 和 padding 抵消就失效，列会左右溢出
• 响应式类顺序不能错：比如 col-12 col-md-6 表示「所有屏占满、≥768px 时占一半」；反过来写 col-md-6 col-12 也行，但若只写 col-md-6 不写 col-，小屏下就变成默认 100% 宽度（非栅格控制）
• 动态插入的 DOM（如 AJAX 加载后 append() 的 col-*）不会自动重算布局，但一般不需要手动触发 —— 栅格是纯 CSS 行为；不过如果用了 Modal 或 Tooltip，JS 初始化就得手动补上

Bootstrap 5 的栅格看似变简单了，但col-这层默认行为恰恰是最容易被当成“不用写”的盲区 —— 写还是不写，决定了小屏到底听不听话。