Bootstrap 5 自定义断点唯一可靠方式是重定义 Sass 变量 $grid-breakpoints 并重新编译，必须同步更新 $container-max-widths 等关联变量，CDN 或预编译 CSS 无效，且需严格遵循导入顺序与键名匹配。
改 $grid-breakpoints 必须重编译 Sass，CDN 或预编译 CSS 无效
直接在 html 里写 col-xl-6 或用 js 切换类名，完全改不了断点触发时机——所有响应式类（如 col-md-6、d-lg-none）都是 sass 编译时静态生成的。你看到的 css 文件里那堆 @media (min-width: 768px) 规则，早在页面加载前就定死了。
常见错误现象：在自定义 CSS 里写 @media (min-width: 800px) { .my-layout { ... } }，以为能“覆盖” md 行为，结果 col-md-6 还是在 768px 生效，你的规则和它根本不在同一套逻辑里。
- 用 CDN 引入
bootstrap.min.css？改任何 Sass 变量都等于没改 - 用 npm 安装但只
@import "bootstrap"？变量覆盖会被忽略，因导入顺序不对 - 改了
$grid-breakpoints却没动$container-max-widths？容器宽度卡在旧值，布局错位
必须同步更新 $container-max-widths 和其他关联变量
只改断点会导致容器宽度错位、栅格列数异常：比如你新增了 xxl，但 $container-max-widths 里没配对应宽度，.container 在该断点下仍按 xl 宽度渲染；若 $grid-columns 仍为 12，而你期望在 xxl 下用 16 列布局，col-xxl-4 就不会生成。
$container-max-widths 必须与 $grid-breakpoints 键名严格一致，缺失键将回退到上一个断点的值。
-
$grid-breakpoints和$container-max-widths的键必须一一对应，且像素值升序排列 - 新增断点（如
"2xl": 1600px）后，必须同步在$container-max-widths和$grid-gutter-width里补上同名 key - 删掉某个断点（比如不用
xs），对应的所有col-xs-*类都不会被编译出来——不是隐藏，是根本不存在
导入顺序错了，变量就白改
Bootstrap 5 的断点逻辑完全基于 $grid-breakpoints 这个 map，它在 scss/_variables.scss 中被首次声明，并在 scss/_grid.scss 中被读取生成栅格类。如果你在 @import "bootstrap" 之后再重写这个变量，Sass 编译器已经用旧值生成了 CSS，新值毫无作用。
必须在 @import "bootstrap/scss/functions" 和 @import "bootstrap/scss/variables" 之间或之前重定义 $grid-breakpoints。
- 正确顺序示例：
@import "custom-variables"→@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→@import "bootstrap/scss/bootstrap" - 漏掉
functions，Sass 会报function undefined - 如果用了 BootstrapVue，光改 Sass 不够，还需在
BVConfigPlugin中显式传入breakpoints数组，且内容必须与 Sass 中的键名完全一致
别手写像素值媒体查询，用 media-breakpoint-up() mixin
硬写 @media (min-width: 768px) 是危险的——这个数值一旦被你自定义断点改掉（比如把 md 设为 820px），你的规则就彻底失效。Bootstrap 5+ 的媒体查询全部由 media-breakpoint-up(md) 这类 mixin 驱动，它们实时读取当前 $grid-breakpoints 的值。
例如：
@include media-breakpoint-up(md) {
.sidebar { width: 280px; }
}
编译后自动变成 @media (min-width: 820px)（如果你已把 md 设为 820px），而不是死守 768px。
-
media-breakpoint-down(lg)会生成@media (max-width: 1023.98px)，注意 .98 是防边界重叠 - 删了断点键却还调用
media-breakpoint-up(xs)？Sass 编译会直接报错 - 新增断点后，
text-2xl-center、d-2xl-none等工具类是否生成，取决于 Bootstrap 版本：≥ 5.2 支持非标准键名（如"2xl"），5.1.x 不支持
实际改动最易被忽略的是三件事：变量重定义的位置、关联变量的键名对齐、以及 BootstrapVue 场景下 JS 层和 CSS 层断点语义的双重同步。漏掉任一环，都会导致类名存在但不生效，或者容器撑不开、列数错乱。
