小屏幕不堆叠是因为漏写col-类名；Bootstrap 5中col-是强制起点，col-12实现手机竖屏堆叠，仅写col-sm-6等断点类在xs下无定义会导致挤在一起。
为什么小屏幕下列没堆叠、还挤成一行
因为漏写了移动端基础栅格类名。col-sm-6 这类带断点的类，只在 ≥576px（sm）及以上生效；xs 及以下尺寸完全无定义，浏览器按普通 block 元素渲染，但 Bootstrap 没给 width，结果就是“内容宽度 + 默认 padding”，视觉上挤在一起、不堆叠。
必须写 col- 或 col-xs- 才能控制超小屏
Bootstrap 5 移除了 col-xs- 前缀，统一用 col- 表示“所有尺寸都生效”的基础规则。它不是可选的兜底项，而是小屏堆叠的强制起点。
-
col-12：手机竖屏下占满整行 → 实现堆叠 -
col-sm-6：≥576px（平板横屏）起才变成两栏 -
col-md-4：≥768px（桌面）起变成三栏 - 只写
col-md-4= xs/sm 下无定义 → 不堆叠，也不等宽，行为不可控
常见错误组合与修复写法
下面这些写法看着像响应式，实则在手机上会出问题：
- ❌
col-sm-6 col-md-4：漏了col-，xs 下无宽度控制 - ❌
col-6 col-md-4：col-6在手机上就只占半行，两列并排 → 不堆叠 - ✅ 正确堆叠逻辑：
col-12 col-sm-6 col-md-4 - ✅ 想某列永远独占一行：
col-12单独写，别混其他断点类
测试时容易忽略的上下文干扰
即使类名写对了，也可能因父容器或全局样式失效：
- 外层用了
.container-fluid但没加.row→ 栅格系统不激活 - 按钮组嵌套在
.input-group或.btn-toolbar里 → 它们自带display: flex，覆盖了col-的flex-basis - 用了
position-absolute或float→ 脱离文档流，栅格宽度计算失效 - 自定义 CSS 里写了
width: auto !important→ 强制覆盖col-12的width: 100%
真正容易被忽略的是：堆叠不是“自动发生”的效果，而是你显式用 col-12 给出的指令；没写，就不执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
