必须在导入 Bootstrap 的 functions 和 variables 前重定义 $grid-breakpoints，同时同步更新 $container-max-widths 等关联变量，并确保键名合法且升序排列，否则断点不生效或组件行为异常。
直接改 $grid-breakpoints 这个 SCSS map 就能自定义 Bootstrap 5 的断点，但必须在导入 Bootstrap 核心文件前完成重定义，否则会被覆盖。
为什么改了没生效？——加载顺序和变量作用域是关键
Bootstrap 5 的断点逻辑完全基于 $grid-breakpoints 这个 map，它在 scss/_variables.scss 中被首次声明，并在 scss/_grid.scss 中被读取生成栅格类。如果你在 @import "bootstrap" 之后再重写这个变量，SCSS 编译器已经用旧值生成了 CSS，新值毫无作用。
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之间或之前重定义$grid-breakpoints - 不能只改
$grid-breakpoints就完事：配套的$container-max-widths（影响 container 宽度）和$grid-columns/$grid-gutter-width（影响列数与间距）也需同步调整，否则.container宽度和.col-md-6行为会不匹配 - 所有键名（如
sm,md）必须是合法 CSS 类名（小写字母、短横线），且按像素值升序排列，否则breakpoint-up()等函数会出错
怎么安全地替换断点？——三步走，缺一不可
以把默认 md 断点从 768px 改成 840px、并新增一个 xl2 断点为例：
- 先在你自己的
_custom-variables.scss里完整重写两个 map：$grid-breakpoints: ( xs: 0, sm: 576px, md: 840px, // ← 修改这里 lg: 992px, xl: 1200px, xxl: 1400px, xl2: 1600px // ← 新增 ); $container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px, xl2: 1520px // ← 必须同步加 );
- 确保你的主 SCSS 文件（如
app.scss）按此顺序导入：@import "custom-variables"; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // …其余模块
- 验证是否生效：检查编译后 CSS 中是否出现
.col-xl2-6、.d-xl2-block等类；用浏览器 DevTools 查看.container在 1600px 宽度下的最大宽度是否为1520px
改断点后哪些地方容易崩？——别只盯着栅格类
断点 map 是 Bootstrap 响应式系统的“心脏”，很多非栅格组件也依赖它：
立即学习“前端免费学习笔记（深入）”；
-
navbar折叠阈值由$navbar-expand控制，它本质是引用$grid-breakpoints的某个键（如md），所以改了md值后，.navbar-expand-md的折叠行为会自动跟着变 —— 这是预期行为，但容易被忽略 -
offcanvas的触发断点（offcanvas-md）同样绑定到 map 键，新增断点后才能用offcanvas-xl2 - 如果你用了
breakpoint-min(md)这类 mixin，输出值会实时响应$grid-breakpoints变更，但若在自定义 mixin 中硬编码了768px，那部分逻辑就脱节了 - 第三方基于 Bootstrap 的 UI 库（如 AdminLTE）可能自己读取
$grid-breakpoints，若它们在你重定义前就导入了 Bootstrap，就会读到原始值 —— 此时需确认其文档是否支持外部断点注入
真正麻烦的不是改 map 本身，而是所有依赖它的衍生逻辑都得保持一致；漏掉 $container-max-widths 或某个组件的断点引用，就会出现容器撑开、栅格错位、隐藏失效等“看起来像 bug”的表现。
