bootstrap 5 已移除 col-xs- 类，未带断点的 col- 即原 col-xs- 功能；col-xl-≥1200px、col-xxl-≥1400px，后者不兼容ie11；多断点类按最小匹配优先覆盖。
col-xs 在 Bootstrap 5 中根本不存在
Bootstrap 5 已彻底移除 col-xs- 类，所有未带断点前缀的 col- 就是它原本的角色。如果你在代码里写了 col-xs-6，浏览器会完全忽略——它不是拼写错误，是语法无效。
常见错误现象：页面在手机上列宽没反应、元素堆成一列不动、DevTools 里看到 class 被划掉（invalid）。
正确做法：
- 需要「超小屏也生效」就直接用 col-6
- 需要「仅超小屏生效、更大屏失效」——Bootstrap 5 不支持这种反向控制，得靠自定义 CSS 或媒体查询手动覆盖
col-xl 和 col-xxl 的断点值与兼容性差异
col-xl- 对应 ≥1200px，col-xxl- 对应 ≥1400px，这是 Bootstrap 5 新增的断点，但要注意：
- IE 11 及更早版本不支持
col-xxl-（连col-xl-都需额外 polyfill） - 部分旧版构建工具（如老版本 webpack + postcss）可能把
col-xxl-*当作未知类丢弃，需检查输出 CSS 是否包含对应规则 -
col-xl-3和col-xxl-2可以共存，但若两者数值冲突（比如同时设col-xl-4 col-xxl-8），在 ≥1400px 屏幕下后者生效，前者被覆盖
混合使用多个断点类时的覆盖逻辑
Bootstrap 的断点类不是“叠加”，而是“条件覆盖”：从最小断点开始匹配，遇到第一个满足条件的就停。例如：
<div class="col-12 col-sm-6 col-md-4 col-lg-3"></div>
它的行为是：
- 屏幕 col-12（12 列占满）
- 576px ≤ 宽度 col-sm-6（忽略
col-12） - 768px ≤ 宽度 col-md-4（忽略前面两个）
- ≥992px → 应用
col-lg-3
关键点：没有“回退”机制。删掉 col-lg-3，在大屏下不会自动用 col-md-4，而是降级到 col-sm-6（因为它是下一个满足条件的）。
实际布局中容易漏掉的容器结构
再精准的 col- 类，如果父级没套对容器，照样失效。必须保证层级是：
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4"></div>
</div>
</div>
常见踩坑点：
- 直接把
col-放在body下——无外边距、无负 margin 修正，列间距错乱 - 用
div替代row——row的负 margin 是为抵消col的 padding，缺了就会留白溢出 -
container和container-fluid混用导致最大宽度不一致，响应式切换时出现意外横向滚动条
断点类本身很直白，真正卡住人的永远是那两层固定结构和它们的 CSS 作用机制。
