在 bootstrap 5 中，某列在特定断点下占满 12 栅格只需添加 col-{breakpoint}-12 类，如 col-md-12 可使该列在 md 及以上断点占满全宽；默认断点包含 xs（无前缀）、sm、md、lg、xl、xxl。
如何在 Bootstrap 5 中让某列在特定断点下占满 12 栅格
直接用 col-{breakpoint}-12 类即可，比如想在 md 断点及以上占满全宽，就加 col-md-12。注意：Bootstrap 5 默认断点是 xs（sm（≥640px）、md（≥768px）、lg（≥992px）、xl（≥1200px）、xxl（≥1400px），类名必须严格匹配。
为什么加了 col-md-12 却没生效
常见原因是覆盖逻辑没理清——Bootstrap 的栅格类有响应式优先级，从左到右按断点升序生效，且高断点类会覆盖低断点类。例如：
<div class="col-6 col-md-12">...</div>
这段代码在 md 及以上宽度确实占满 12 格，但在 sm 下仍是 col-6（即 6 格）；但如果写成：
<div class="col-md-12 col-6">...</div>
则 col-6 会被 col-md-12 覆盖，因为 md 是更高断点，它生效时自动忽略更小断点的设置。
- 断点类不是“叠加”，而是“条件切换”：只在对应及更大视口生效
- 不要混用冲突的固定尺寸类（如
col-4和col-lg-12），除非你明确需要响应式变化 - 如果父容器没加
row，或没包裹在container/container-fluid里，栅格系统本身就不工作
想只在某个断点“恰好”生效，不继承到更大尺寸怎么办
Bootstrap 没提供“仅在 md”这种精确区间类，但可以用组合规避：比如要“只在 md（768–991px）占满”，就得用 col-md-12 col-lg-6 这种写法，让 lg 及以上回退到其他尺寸。
-
col-md-12→ 在 768px 起生效，并持续到更大尺寸 - 所以必须显式声明
col-lg-6或col-xl-4来覆盖它 - 没有
col-md-only-12这种类，这是框架设计决定的，别找不存在的 class - 若需更精细控制，建议改用 CSS 媒体查询 +
flex手动设flex: 0 0 100%
使用 col 不带数字时的行为差异
col（无数字）表示“等分剩余空间”，和 col-12 完全不同。比如两个 col 并列会各占 50%，而 col-12 是强制占满整行。
-
col是 flex 基础行为，依赖父row的display: flex -
col-12是固定栅格，对应flex: 0 0 100%+max-width: 100% - 混用
col和col-12在同一行可能导致布局错乱，因为前者按比例、后者按固定值
真正容易被忽略的是：断点类的生效范围是“≥该断点”，不是“等于”。调试时用浏览器响应式工具调到刚好 768px，再往大拖一点，确认是否仍符合预期——很多问题其实出在你以为的“md 就是 768px”，实际它是“768px 及以上”。
