因为所有col-*类是Sass编译时静态生成的，改$grid-breakpoints后未重编译CSS，且未同步更新$container-max-widths等关联变量，导入顺序错误或键名不匹配也会导致失效。
为什么改了断点变量，col-md-6 还是在 768px 生效？
因为所有 col-* 类都是 Sass 编译时静态生成的。你看到的 @media (min-width: 768px) 规则，在 CSS 文件里早已写死——它不读取运行时 JS 或自定义 CSS 里的媒体查询。改 $grid-breakpoints 后没重编译，等于没改。
常见错误现象：col-md-6 仍按 768px 触发，但你在自定义 CSS 里写了 @media (min-width: 800px) 想“覆盖”，结果两者互不感知，布局错位。
- 用 CDN 引入
bootstrap.min.css？任何 Sass 变量修改都无效 - 用 npm 安装但只
@import "bootstrap"？变量覆盖被忽略，因导入顺序错误 - 只改
$grid-breakpoints却漏掉$container-max-widths？容器宽度卡在旧值，列宽和容器不匹配
$grid-breakpoints 和 $container-max-widths 必须严格对齐
这两个 map 的键名必须一一对应、像素值升序排列，缺一不可。比如新增 "xxl": 1400px，就必须同步在 $container-max-widths 里补上 "xxl": 1320px（或其他合理值），否则 .container 在 xxl 断点下会回退到 xl 的宽度，导致内容溢出或留白。
删掉某个断点（如 "xs"）？那所有 col-xs-* 类根本不会被编译出来——不是隐藏，是彻底不存在。
立即学习“前端免费学习笔记（深入）”；
-
$grid-breakpoints和$container-max-widths键名不一致 → 容器宽度错位、列数异常 - 新增断点后没同步更新
$grid-gutter-width的同名 key → 间隙在该断点下失效或复用旧值 - 键值未升序排列（如
"lg": 992px, "md": 768px）→ Sass 报错或生成错乱媒体查询
导入顺序错了，$grid-breakpoints 就白定义
Bootstrap 5 的栅格类在 scss/_grid.scss 中生成，而它依赖 scss/_variables.scss 里已声明的 $grid-breakpoints。如果你在 @import "bootstrap" 之后才重定义变量，Sass 已经用旧值编译完了。
正确顺序必须是：
@import "custom-variables"; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/bootstrap";
- 漏掉
functions？Sass 会报function undefined错误 - 把
custom-variables放在variables之后？变量覆盖失败 - 用了 BootstrapVue？光改 Sass 不够，还需在
BVConfig中同步断点映射
用 breakpoint() 函数替代硬编码像素值
直接写 @media (min-width: 768px) 容易错位，也难维护。封装一个 @function breakpoint($name)，统一从 $grid-breakpoints 取值，能确保所有地方断点语义一致。
注意：breakpoint('md') 返回的是纯数值（如 768px），不是字符串。下面写法会报错：
@media (min-width: breakpoint('md') * 1em) { ... }因为 Sass 不自动转换单位。若项目用 em/rem 做断点，需额外实现 strip-unit() 或定义两套映射。
- 硬编码断点 → 多处不一致、改一处漏十处
- 函数返回带单位值 →
@media解析失败 - 混用 em 和 px 断点 → 用户缩放时响应行为断裂
断点错位最常发生在变量改了但没重编译、或只动了一个关联变量。真正生效的前提是：Sass 重新跑完全部流程，且所有依赖变量（$grid-breakpoints、$container-max-widths、$grid-gutter-width）保持键名与顺序完全一致。
