必须重编译Sass才能生效；修改$grid-breakpoints需前置定义、键名单位完整；$container-max-widths须同步更新；Navbar等组件断点需单独覆盖；BootstrapVue还需配置breakpoints数组。
必须重编译 Sass，只改变量不编译等于没改；CDN 或直接引入 bootstrap.min.css 的项目完全无法修改断点。
修改 $grid-breakpoints 必须前置定义并重编译
Bootstrap 5 所有响应式类（如 col-lg-6、d-md-none）和媒体查询都是编译时静态生成的。你在 Sass 文件顶部改了 $grid-breakpoints，但没走构建流程重新编译 CSS，浏览器里看到的还是原始断点（比如 @media (min-width: 992px)）。
- 必须在
@import "bootstrap/scss/variables"之前定义新断点，且顺序不能错：先$grid-breakpoints→ 再@import "bootstrap/scss/functions"→ 然后@import "bootstrap/scss/variables" - 键名必须完整保留：
xs、sm、md、lg、xl、xxl一个都不能少，也不能重命名（否则media-breakpoint-up(md)会报错） - 值必须带单位：
lg: 1024px✅，lg: 1024❌，lg: "1024px"❌ - 常见错误：在
@import "bootstrap"后再覆盖变量——此时所有样式已编译完毕，改了也白改
$container-max-widths 不同步更新，布局就“卡住”
断点改了，容器宽度不跟着动，就会出现「屏幕已到 lg 断点，但 .container 还死守 960px」这种视觉割裂。因为 .container-lg 的宽度来自 $container-max-widths，它和 $grid-breakpoints 是两个独立变量，但语义强绑定。
- 两个变量的键必须完全一致（包括顺序），
xs可以不在$container-max-widths中（它默认 100%） - 值要合理递增：
md: 720px→lg: 1000px✅，lg: 600px❌（比上一级还小） - 如果漏掉
xl键，.container-xl类将失效或回退到默认行为 - 改了
lg: 1024px，但$container-max-widths: lg: 960px没动？那在 1024–1199px 区间，容器宽度就卡在旧值不动
Navbar、Offcanvas 等组件断点需单独覆盖
这些组件内部硬编码了断点逻辑，只改 $grid-breakpoints 不会影响它们。例如 $navbar-breakpoint 默认等于 $grid-breakpoints(md)，你把 md 改成 840px，但没显式重写 $navbar-breakpoint，navbar-expand-md 仍按原始 768px 折叠。
- 必须搜索
bootstrap/scss/_variables.scss中所有含-breakpoint的变量：$navbar-breakpoint、$offcanvas-breakpoint、$accordion-flush-breakpoint等 - 可直接赋值像素：
$navbar-breakpoint: 1024px，也可引用键名：$navbar-breakpoint: lg -
data-bs-breakpoint="lg"属性只复用已有断点，不能跳过 Sass 编译——它读的是编译后的 CSS 媒体查询，不是 JS 运行时计算 - 别试图用
@media (max-width: 1024px)覆盖.navbar-collapse显示逻辑——JS 不认这个，类名和媒体查询不匹配会导致点击无反应
BootstrapVue 用户还得配 breakpoints 数组
如果你用的是 BootstrapVue，光改 Sass 断点，
- 必须在
Vue.use(BVConfigPlugin, { breakpoints: [...] })中一次性声明完整断点数组 - 数组内容必须和
$grid-breakpoints的键名严格一致（['sm', 'md', 'lg', 'xl', 'xxl']），顺序从小到大 - 新增断点（如
2xl）后，Sass 里加了键，但这里漏了'2xl'，col-2xl-4就会触发 warning “Unknown breakpoint '2xl'” - 如果你用的是 Bootstrap 5 CSS，但
breakpoints还写['xs', 'sm']，col-xs-12会找不到匹配，退化为 100% 宽度
最常被忽略的一点：所有自定义断点的生效，都依赖 make-col-ready() 和 make-col() 这类 mixin 的调用逻辑。手写媒体查询 + flex-basis 而不调用它们，列的内边距、box-sizing、flex 基础属性都会错乱——这不是断点没改对，是栅格系统底层没接上。
