Bootstrap 5 中 col-{breakpoint}-12 类从指定断点起向上生效（如 col-md-12 在 ≥768px 及更大屏幕全宽），需配合正确嵌套结构（container→row→col）和断点覆盖逻辑，避免因漏写更高断点或父容器缺失导致失效。
Bootstrap 5 中如何让 col 在某个断点下强制占满 12 栅格
直接用 col-{breakpoint}-12 类即可，比如在 md 断点下全宽，就加 col-md-12。注意：这个类不会影响其他断点，只作用于指定断点及更宽的视口（除非显式覆盖）。
常见错误是误以为 col-md-12 只在中屏生效——其实它从 md（768px）起一直生效到更大屏幕，除非你额外写了 col-lg-6 这类更高断点的类来覆盖。
-
col-sm-12：≥576px 全宽 -
col-md-12：≥768px 全宽 -
col-lg-12：≥992px 全宽 - 若需仅在某断点“恰好”全宽（不延续到更大屏），必须显式重置更高断点，例如：
col-md-12 col-lg-6
为什么加了 col-md-12 却没生效？检查这几点
最常踩的坑不是写错类名，而是父容器或上下文干扰：
- 父元素没加
row类：Bootstrap 的col必须嵌套在row内才能正确计算栅格宽度和间距 - 同时写了冲突的列类，比如
col-6 col-md-12 col-lg-4，但漏掉了col-lg-4导致大屏回退到默认行为（col无参数时等效于col-auto） - CSS 覆盖：自定义样式里写了
width: 50%或flex: 0 0 50%等，会强行覆盖 Bootstrap 的栅格计算 - 使用了
col-{breakpoint}（无数字）类：这是“自动适配内容宽度”，不是占满 12 栅格
想只在某个断点“临时”全宽，其他断点保持原有布局
关键在于「覆盖优先级」：Bootstrap 按断点从小到大顺序应用类，后写的类会覆盖前面同类型设置（前提是断点更宽）。所以策略是“先设窄屏布局，再为特定断点覆盖为 12”。
例如：小屏并排两列、中屏堆叠成一列、大屏又恢复两列：
<div class="row"> <div class="col-6 col-md-12 col-lg-6">A</div> <div class="col-6 col-md-12 col-lg-6">B</div> </div>
-
col-6：≤575px 时各占一半 -
col-md-12：≥768px 时两者都变全宽（垂直堆叠） -
col-lg-6：≥992px 时再次平分，回到并排
Bootstrap 4 和 5 的差异要注意
行为基本一致，但细节上容易混淆：
- 断点数值不同：
sm在 v4 是 ≥576px，在 v5 也是 ≥576px（没变），但xs在 v4 有对应类（如col-xs-12），v5 已移除xs前缀，直接用col-12 - v5 默认启用
flex-wrap: wrap，如果子项总和超 12，会自动换行；v4 需要手动加flex-wrap类 - v5 的
col类默认是flex: 1 1 0，而 v4 是flex: 1 1 auto，对内容撑开行为略有影响，但对col-*-12无实质区别
真正容易被忽略的是：断点类的“最小宽度”特性——col-md-12 不代表“只在 md 时生效”，它是一道向上的门槛，跨过去就持续生效，直到被更高断点的同类设置覆盖。这点不理解，调试时就会反复怀疑是不是类没加载。
