Bootstrap 5的col断点类“向上生效”，即col-md-6在≥768px及所有更大断点（lg/xl/xxl）均生效，不自动切换；漏写中间断点则回退至上一个已声明样式，而非默认全宽。
col 断点类的“向上生效”机制
Bootstrap 5 的 col-{breakpoint}-{span} 类不是“仅在该断点生效”，而是“从该断点起，向上所有更大屏幕都生效”。比如 col-md-6 在 ≥768px（md）、≥992px（lg）、≥1200px（xl）等所有更大断点下都会保持 6 列宽度，不会自动变成 col-lg-4 或其他值。
这意味着：你写的断点类越多，控制越精细；但漏写某个中间断点，会导致该尺寸下回退到上一个已声明的断点样式——而不是“失效”或“默认为 col-12”。
-
col-6：从 xs（ -
col-sm-6 col-lg-4：sm–md 是 6 列，lg+ 是 4 列；md 尺寸没显式写，所以继承col-sm-6 -
col-md-8 col-xl-3：md–lg 是 8 列，xl+ 是 3 列；没有写 lg 类，但 lg 尺寸会沿用 md 的 8 列
断点顺序写错会导致桌面端列宽突变
常见错误是把大断点写在前面、小断点写在后面，比如 col-xl-4 col-md-6。CSS 层叠规则会让 col-md-6 覆盖 col-xl-4 在 md 尺寸下的表现，而 xl 尺寸下两个类同时存在，最终取后者（col-xl-4）——但人眼看到的是“本来好好的四列，一缩到桌面宽度反而变宽成六列”，以为是 bug。
正确顺序必须从小到大排列，让后写的类自然覆盖前写的类：
- ✅ 推荐：
col-12 col-sm-6 col-md-4 col-xl-3 - ❌ 避免：
col-xl-3 col-md-4 col-sm-6 col-12（语义混乱，易出视觉偏差）
这不是语法错误，但会破坏响应式预期——尤其在调试时，容易误判是栅格失效，其实是 CSS 优先级和断点继承逻辑被绕晕了。
不写断点前缀的 col 类只在 ≥576px 生效
col（无数字、无断点）是个特殊类，它只在 sm 及以上（≥576px）启用 flex 均分行为；在 xs（
如果你希望“所有尺寸都等宽”，不能只写 col，得明确指定 col-4 或 col-3 这类带 xs 断点的类——因为 col-4 等价于 “xs 断点起生效”，而 col 没有 xs 含义。
-
col→ 仅 ≥576px 启用 flex 均分， -
col-4→ 从 -
col-sm-4→
混用断点类时，列总和仍需为 12 才能等宽
断点再细，也不能绕过 Bootstrap 栅格的基本约束：同一 row 内所有 col 子项的列数之和，必须为 12，才能触发“自动均分”逻辑。否则浏览器会按 flex 默认行为拉伸/收缩，看起来“不等宽”。
例如，在 col-md-6 col-lg-4 场景下：
- md 尺寸：两个
col-md-6→ 和为 12 → 等宽 - lg 尺寸：两个
col-lg-4→ 和为 8 ≠ 12 → 不等宽，右侧留白
这时候要么补第三个 col-lg-4，要么改用 row-cols-lg-3 这类基于行的均分工具类——它不依赖列数总和，直接让 row 内所有子项均分。
最容易被忽略的是：断点切换后，列数总和是否还满足 12。很多人只盯着单个元素的 class，忘了整行协同性。
