直接改$grid-breakpoints变量即可生效，但必须在引入Bootstrap Sass前定义完整map（含xs至xxl所有key），并同步调整$container-max-widths及BootstrapVue的breakpoints配置，CDN项目需用媒体查询硬覆盖。
直接改 $grid-breakpoints 就生效，但顺序错了就白改
bootstrap 5 的断点系统完全由 $grid-breakpoints 这个 sass map 控制，不是靠一堆零散变量（比如 $screen-lg-min）拼出来的。你改了旧变量，.col-lg-6 依然在 992px 触发——因为媒体查询逻辑早已被 $grid-breakpoints 全面接管，老变量只是兼容别名。
关键约束只有一条：你的自定义必须出现在 @import "bootstrap/scss/variables" 和 @import "bootstrap/scss/bootstrap" 之前。推荐结构：
- 新建
_custom-breakpoints.scss - 先
@import "~bootstrap/scss/functions"（确保map-get等可用） - 再定义
$grid-breakpoints（完整 map，不能缺 key） - 最后
@import "~bootstrap/scss/bootstrap"
缺一步，变量就被默认值覆盖，编译后断点还是原样。
$container-max-widths 必须同步调，否则容器“卡住”不扩展
断点变宽了，但 .container 在新断点区间仍用旧宽度，这是最常被忽略的错配。例如把 lg 断点提到 1024px，但 $container-max-widths 里 lg 还是 960px，结果在 1024–1199px 区间，容器死卡在 960px，内容左右留白严重。
必须保证两个 map 的 key 完全对齐，且值递增合理：
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px)$container-max-widths: (sm: 540px, md: 720px, lg: 1000px, xl: 1400px)
注意：xs 不需要在 $container-max-widths 中定义（它对应 max-width: 100%），但其他所有 key 都得有，漏一个就会回退到 Bootstrap 默认值。
用了 BootstrapVue？光改 Sass 不够，还得配 breakpoints 插件参数
你在 HTML 里写了 <b-col cols="12" lg="6">，但 lg 行为没变——大概率是因为 BootstrapVue 没读到你新定义的断点。它底层不解析 Sass，而是靠插件初始化时传入的 breakpoints 数组来识别 token。
常见错误现象：.col-xxl-4 编译通过、CSS 生成了，但页面上完全无效，因为 Vue 组件压根不认识 xxl 这个 key。
必须显式配置：
Vue.use(BVConfigPlugin, {
breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
});
这个数组要和你 Sass 里 $grid-breakpoints 的 key 完全一致，顺序无所谓，但缺一个，对应类就失效。
CDN 项目或纯 CSS 引入？别折腾 Sass，用媒体查询硬覆盖
如果你用的是 CDN 或直接引入 bootstrap.min.css，那 Sass 变量重定义这条路走不通。此时只能靠 CSS 媒体查询手动覆盖响应式类的行为，但要注意优先级和完整性：
- 必须用
!important（因为 Bootstrap 的原始规则 specificity 很高） - 要覆盖所有相关类：
.col-lg-*、.d-lg-block、.text-lg-center等 - 示例（将 lg 断点从 992px 改为 1024px）：
@media (min-width: 1024px) { .col-lg-1, .col-lg-2, ..., .col-lg-12 { flex: 0 0 auto; } }
这种写法维护成本高、易遗漏，仅建议临时应急；长期项目务必切回 Sass 构建流程。
真正容易被忽略的点是：断点修改从来不是单点操作。Sass 变量、容器宽度、Vue 插件配置、甚至构建工具是否清除了缓存（比如 Webpack 的 cache: true 导致旧变量未重载），任一环节掉链子，都会让断点表现“看似生效实则错乱”。
