修改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？容器宽度卡在旧值，布局错位
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 是防边界重叠 - 删掉某个断点（比如去掉
xs键），media-breakpoint-up(xs)就会报 Sass 编译错误 - 新增断点（如
"2xl": 1600px）后，必须同步在$container-max-widths和$grid-gutter-width里补上同名 key
自定义断点后，col-* 类消失或不生效的三个主因
你改了 $grid-breakpoints，但 col-md-6 在浏览器里查不到对应样式？大概率不是代码写错，而是编译链断了。
- 导入顺序错了：必须先定义变量，再依次
@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→ 重定义$grid-breakpoints→@import "bootstrap/scss/bootstrap"；漏掉functions，Sass 会报function undefined - 删了断点键却还用对应类：删掉
xl后，col-xl-4不是“隐藏”，是压根没被编译进 CSS，浏览器开发者工具里搜不到该选择器 - 没同步
$container-max-widths：比如把lg提到1024px，但$container-max-widths里lg还是960px，那在 1024–1199px 区间，.container就卡在 960px 不扩展，内容被挤出
新增或删减断点时，gx-* 和 container 宽度必须手动对齐
栅格断点和 gutter 响应式类（如 gx-md-3）、容器最大宽度（.container）是三套独立变量，但语义强绑定。你改了 $grid-breakpoints，它们不会自动适配。
例如你新增 "2xl": 1600px：
- 必须在
$container-max-widths里补"2xl": 1540px，否则.container到 1600px 后不再变宽 - 必须在
$grid-gutter-width里补同名 key，否则gx-2xl-4类不会生成（除非你用的是响应式 gutter 工具类写法，如gx-2xl-4，那还要确认是否调用了@include generate-gutter-classes()） - 删掉
sm？那gx-sm-2、container的sm宽度、甚至media-breakpoint-up(sm)全部失效
最易被忽略的一点：断点键名大小写和连字符必须完全一致——"2xl" 和 2xl 在 Sass map 里是两个 key，后者不会被识别。
