Bootstrap 5 中 col-xs- 类已彻底移除，所有超小屏（
Bootstrap 5 中 col-xs- 类已彻底移除，所有超小屏（col- 类控制；写 col-xs-12 不仅无效，还会被浏览器完全忽略。
为什么 col-xs- 突然“不见了”？
这不是 bug，是 Bootstrap 5 的主动精简：col-xs- 被视为冗余前缀——因为“xs”就是最小断点，默认生效，没必要再标一遍。所有 col- 开头的类（如 col-6、col-12）从最窄屏幕起就生效，等价于旧版的 col-xs-*。
常见错误现象：
- 页面在手机上变成单列堆叠，但你写了
col-sm-6却没写col-—— 因为没有默认类，小屏直接退化成display: block - 开发者工具里能看到
col-xs-6这个 class，但对应 CSS 规则压根没加载 —— 编译后的 CSS 根本不包含该选择器
col-12 怎么替代 col-xs-12？
直接替换即可，无需加任何条件判断或 JS 补丁：
-
col-xs-12→col-12 -
col-xs-6 col-sm-4→col-6 col-sm-4（col-6覆盖 xs，col-sm-4在 ≥576px 时覆盖它） - 别写
col-xs-6 col-md-4——col-xs-不存在，等于只写了col-md-4，小屏会塌成一列
断点优先级规则没变：越靠后的类权重越高，且只在对应断点触发。所以 col-12 col-md-6 的意思是“所有屏都占满，但 ≥992px 时缩为半宽”。
容易踩的坑：漏掉 col- 就等于放弃小屏控制权
很多迁移项目出问题，不是因为用了旧类名，而是删掉 col-xs- 后，忘了补上对应的 col-。结果就是：
- 后台管理页本该全尺寸多列，却在手机上全堆成一列 —— 因为只留了
col-lg-3 - 营销页想“手机单列 + 平板双列”，写了
col-sm-6，但没写col-12，导致 iPhone 上内容挤成窄条还换行异常 - 用 Sass 自定义断点时删了
xs键（比如改$grid-breakpoints），结果col-类也失效 ——col-依赖的是底层的 “xs 断点存在” 这一前提
真正关键的不是“怎么写新类名”，而是确认每一处栅格元素至少有一个无前缀的 col- 类兜底。
嵌套和组合时的连带影响
子列如果也用响应式写法，必须延续同一逻辑：
- 外层写
col-8，子row里想让两个子列在小屏并排，就得写col-6 col-sm-4，而不是col-xs-6 col-sm-4 - 卡片内用
col-1布局 10 列时，col-1本身已覆盖所有屏幕，无需额外声明断点；但若想大屏 10 列、小屏堆叠，就得写col-12 col-xl-1—— 注意这里用的是col-xl-，不是col-xs-
最常被忽略的一点：col- 类的宽度计算完全依赖 row 和 container 的嵌套结构；哪怕类名全对，缺了 row，col-12 也会退化为普通块级元素，视觉上“不生效”。
