必须在 @import "bootstrap" 之前定义 $grid-breakpoints 等变量，且需同步更新 $container-max-widths、$grid-columns 等关联变量，并确保键名一致、顺序合理，否则响应式类和组件行为将错位。
改断点必须在 @import "bootstrap" 之前定义变量
Bootstrap 5 的 $grid-breakpoints 是编译时静态生成类名的依据，不是运行时可覆盖的 CSS 媒体查询。你如果在 @import 之后写 $grid-breakpoints: (...);，它会被默认值覆盖，所有 .col-lg-6、.d-xl-block 这类工具类仍按原始断点（如 lg: 992px）生成，导致行为错位。
正确顺序只能是：
- 在自定义 Sass 入口文件（如
custom.scss）顶部先声明$grid-breakpoints - 再
@import "bootstrap/scss/functions";（可选，但推荐） - 再
@import "bootstrap/scss/variables";（确保变量被重载） - 最后
@import "bootstrap/scss/bootstrap";
漏掉任意一步，尤其是把 @import "bootstrap" 放在变量定义前，就等于没改。
$grid-breakpoints 和 $container-max-widths 必须 key 对齐且同步更新
只改 $grid-breakpoints 而不碰 $container-max-widths，会导致 .container 在新断点区间“卡住不动”。比如你把 lg 从 992px 改成 1024px，但 $container-max-widths 里 lg 还是 960px，那在 1024px–1199px 区间，容器宽度就停在 960px，内容被硬生生挤窄。
必须同时更新两者，且 key 名严格一致：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1024px, // ← 改了这里 xl: 1440px, xxl: 1920px ); $container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 992px, // ← 这里也得对应调大，不能还是 960px xl: 1380px, xxl: 1880px );
注意：$container-max-widths 的值应略小于下一个断点，否则会出现“跳变”或空白间隙。
Offcanvas、Navbar 等组件的 breakpoint 参数受限于 $grid-breakpoints 键名
offcanvas 的 breakpoint 属性（如 data-bs-breakpoint="lg"）和 navbar 的 .navbar-expand-lg 类，都依赖 $grid-breakpoints 中定义的键名。你不能写 navbar-expand-1024px 或 data-bs-breakpoint="1024px"——这会直接失效，JS 不报错，但媒体查询根本不会匹配。
所以如果你新增了一个断点，比如 tablet: 832px，就必须把它加进 $grid-breakpoints，否则所有基于断点的组件都无法识别它：
$grid-breakpoints: ( xs: 0, sm: 576px, tablet: 832px, // ← 新增键名 md: 768px, // ← 注意：键名顺序不影响编译，但语义易混淆，建议按宽度升序排 lg: 1024px );
键名一旦定义，所有相关类（.offcanvas-tablet、.navbar-expand-tablet）才会被生成。
别忽略 $grid-gutter-width 和列数变量的联动影响
断点改了，常伴随布局密度调整。比如面向大屏后台系统，你拉宽了 lg 断点，可能还想让栅格间隙（gutter）变大一点，提升可读性；或者把默认 12 列改成 16 列以适配更细粒度的布局。
这些都需要显式覆盖：
-
$grid-gutter-width: 2rem;（全局 gutter，默认1.5rem） -
$grid-columns: 16;（影响所有.col-*类生成逻辑） -
$grid-breakpoints和$container-max-widths已提过，必须同步
漏掉 $grid-columns，即使你写了 .col-16，也不会生效——因为 Bootstrap 的 Sass 循环只生成到 $grid-columns 指定的列数。
$container-max-widths 同步和 @import 顺序 —— 这两个一错，整个响应式布局就“看起来对，其实不对”。 
