直接修改 $screen-md 等旧变量无效，因 bootstrap 5 已弃用它们，全部断点由 $grid-breakpoints 这一 sass map 统一控制，内部函数仅读取该 map 中的键值对。
$grid-breakpoints 变量必须重定义，且必须在引入 Bootstrap Sass 主文件前完成；CDN 项目无法修改，编译流程不正确会导致断点“改了但没生效”。
为什么直接改 $screen-md 这类变量无效
Bootstrap 5 已弃用 $screen-sm、$screen-md 等独立变量，全部由 $grid-breakpoints 这个 Sass map 统一控制。你改了 $screen-md，但内部函数（比如 media-breakpoint-up()）根本不会读它——只认 $grid-breakpoints 里的键值对。
-
$grid-breakpoints必须是完整 map，所有默认 key（xs、sm、md、lg、xl、xxl）一个都不能少，删掉xl会导致col-xl-6类彻底消失 - 值必须带单位，写
768或"768px"都会编译报错，只能是768px - 新增断点（如
xxs）可以，但得同步加进$container-max-widths和 BootstrapVue 的breakpoints配置里，否则容器宽度和 Vue 组件不响应
$grid-breakpoints 和 $container-max-widths 必须配对更新
只改断点不调容器宽度，会出现“媒体查询切过去了，但容器卡在旧尺寸不动”的现象。例如把 lg 从 992px 改成 1024px，但 $container-max-widths 里 lg 还是 960px，那在 1024–1199px 区间，.container 就一直撑不开。
-
$container-max-widths的 key 必须和$grid-breakpoints完全一致（包括顺序），不能多也不能少 - 值要合理递增，比如
sm: 540px→md: 720px→lg: 1020px，跳着写（如lg: 600px）会导致make-container-max-widths()函数生成错误 CSS - 如果用了 BootstrapVue，还得显式传入新断点数组：
Vue.use(BVConfigPlugin, { breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] })
构建流程中 import 顺序决定一切
哪怕变量写对了，@import "bootstrap/scss/bootstrap" 放在自定义变量前面，就等于白改。Sass 是顺序执行的，函数第一次读 $grid-breakpoints 时拿到的是默认值，后面再覆盖也来不及。
- 正确顺序示例：
$grid-breakpoints: ( xs: 0, sm: 375px, md: 750px, lg: 1024px, xl: 1440px );$container-max-widths: ( sm: 340px, md: 720px, lg: 980px, xl: 1380px );@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";@import "bootstrap/scss/mixins";@import "bootstrap/scss/root";- ……其余模块
注意：@import "bootstrap/scss/functions" 必须在自定义变量之后、其他 Bootstrap 文件之前，因为它的内部逻辑会立即读取 $grid-breakpoints。
验证是否生效的三个关键检查点
改完重新编译后别急着看页面，先确认这三件事：
- 浏览器开发者工具里，查
col-md-6对应的媒体查询是否真变成了@media (min-width: 750px)（而不是还停在768px） - 在对应视口宽度下，
.container的计算宽度是否匹配你设的$container-max-widths值 - 如果用了
<b-col md="6"></b-col>，打开 Vue Devtools，看组件 props 里的breakpoint是否识别到了新断点名（比如你加了xxs，但没配breakpoints数组，它就当不存在）
最容易被忽略的是：改了 Sass 变量却忘了清空构建缓存，或者 Webpack 的 sass-loader 没配置 additionalData 注入全局变量——这时候热更新看着生效了，实际跑的还是旧 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
