bootstrap 5 自定义断点唯一可靠方式是重定义 sass 变量 $grid-breakpoints 并重新编译，cdn 引入无法修改；必须同步更新 $container-max-widths 等关联变量及组件专属断点（如 $navbar-breakpoint），且 bootstrapvue 需额外配置 breakpoints 数组。
改 $grid-breakpoints 必须重编译，CDN 引入完全无效
直接在 HTML 里写 col-lg-6 或用 JS 加类，永远走的是 Bootstrap 官方预编译好的断点逻辑。你改了 Sass 变量但没重编译，CSS 文件里还是 @media (min-width: 992px)，不是你想要的 1024px。只有通过构建工具（如 Vite 的 @vitejs/plugin-sass、Webpack + sass-loader 或 Dart Sass CLI）加载你的自定义变量文件并参与编译流程，新断点才会真正落地。
常见错误现象：
- 浏览器开发者工具里查到的媒体查询仍是原始值（比如
@media (min-width: 992px)），说明 Sass 没编译进去 - 写了
col-2xl-4但样式没生效——2xl类根本没被生成，因为$grid-breakpoints里没声明这个键
$grid-breakpoints 和 $container-max-widths 必须同步更新
只改断点数值，不调容器宽度，页面会在新旧断点交界处“卡住”。比如把 lg 从 992px 改成 1024px，但 $container-max-widths 里的 lg 还是 960px，结果在 1024–1199px 区间，.container 死死卡在 960px，左右留白严重。
实操建议：
-
$grid-breakpoints的键名（xs、sm、md、lg、xl、xxl）必须完整保留，不能删减或重命名，否则依赖它的 mixin（如media-breakpoint-up(md)）会报错 - 值必须是带单位的长度（
1024px），不能写1024或"1024px" -
$container-max-widths的键必须和$grid-breakpoints完全一致（包括顺序），且值要合理递增；xs不需要出现在$container-max-widths中（它默认撑满）
组件专属断点变量（如 $navbar-breakpoint）也要手动覆盖
Navbar、Offcanvas 等组件内部硬编码了断点逻辑，例如 $navbar-breakpoint 默认等于 $grid-breakpoints(md)。只改 $grid-breakpoints 不会影响它——navbar-expand-lg 仍会在 992px 折叠，哪怕你已把 lg 断点设为 1024px。
实操建议：
- 搜索
bootstrap/scss/_variables.scss文件中所有含-breakpoint的变量，比如$navbar-breakpoint、$offcanvas-breakpoint、$accordion-flush-breakpoint - 在自定义变量块中一并重写它们，可直接赋值像素（如
$navbar-breakpoint: 1024px），也可引用新断点键（如$navbar-breakpoint: lg） - 注意：这些变量必须在
@import "bootstrap/scss/variables"之前定义，否则会被默认值覆盖
新增断点（如 "2xl"）后，BootstrapVue 需额外配 breakpoints 数组
BootstrapVue 组件（如 <b-col lg="6"></b-col>）不解析 CSS，它靠 BVConfigPlugin 初始化时传入的 breakpoints 数组识别断点名。你 Sass 里新增了 "2xl"，但插件配置里没加，组件就根本不知道这个 token 存在，控制台会报 Unknown breakpoint '2xl'。
实操建议：
- 在 Vue 插件注册时显式传入完整数组：
Vue.use(BVConfigPlugin, { breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', '2xl'] }) - 数组内容必须和
$grid-breakpoints的 key 完全一致（包括大小写、是否带引号） - 如果用的是
bootstrap-vue@3+（适配 Vue 3），则需通过createApp().use(BVConfigPlugin, { ... })方式配置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
