bootstrap 5 自定义断点唯一可靠方式是修改 sass 变量 $grid-breakpoints 并同步更新 $container-max-widths，通过构建工具重编译；cdn 引入或仅改 html/js 无效，且 bootstrapvue 需额外配置 breakpoints 数组。
改 $grid-breakpoints 必须重编译，CDN 引入的 CSS 完全无效
直接在 HTML 里写 col-xl-6 或用 JS 动态加类，永远走的是 Bootstrap 官方预编译好的断点逻辑。你改了 Sass 变量但没重编译，等于没改——CSS 文件里还是 @media (min-width: 1200px)，不是你想要的 1440px。只有通过构建工具（如 Webpack + sass-loader、Vite 的 @vitejs/plugin-sass 或 Dart Sass CLI）加载你的自定义变量文件，并参与编译流程，新断点才会真正落地。
$grid-breakpoints 和 $container-max-widths 必须同步更新
只改断点数值，不调容器宽度，页面会在新旧断点交界处“卡住”。比如把 lg 从 992px 改成 1024px，但 $container-max-widths 里的 lg 还是 960px，结果在 1024–1199px 区间，.container 死死卡在 960px，左右留白严重。
-
$grid-breakpoints定义触发媒体查询的最小宽度（min-width），键名必须完整：至少包含xs、sm、md、lg、xl（删掉某个 key，对应所有col-xx-*类都不会生成） -
$container-max-widths必须与$grid-breakpoints的非xs键完全对齐，且值递增合理；xs不需要出现在$container-max-widths中（它默认撑满） - 示例匹配写法：
$grid-breakpoints: ( sm: 576px, md: 768px, lg: 1024px, xl: 1440px );<br>$container-max-widths: ( sm: 540px, md: 720px, lg: 1000px, xl: 1400px );
用了 BootstrapVue？光改 Sass 不够，还得配 breakpoints 插件参数
BootstrapVue 组件（如 <b-col lg="6"></b-col>）不解析 CSS，它靠 BVConfigPlugin 初始化时传入的 breakpoints 数组识别断点名。你 Sass 里新增了 "2xl"，但插件配置里没加，组件就根本不知道这个 token 存在，控制台会报 Unknown breakpoint '2xl'。
- 必须在
Vue.use(BVConfigPlugin, { breakpoints: [...] })中一次性声明完整数组，顺序从小到大 - 数组内容要和
$grid-breakpoints的 key 完全一致（包括大小写、引号、是否带引号） - 新增断点名（如
xxl）后，CSS 类（col-xxl-4）需 Sass 重编译生成，否则 HTML 写了也无效
常见错误现象和排查重点
最常被忽略的不是“怎么改”，而是“改完之后谁在用、谁没跟上”。断点修改是链式影响，漏一环就失效。
-
col-lg-6在预期宽度没生效？先检查浏览器开发者工具里，对应媒体查询是不是你设的值（比如@media (min-width: 1024px)），不是说明 Sass 没编译进去；是的话再看$container-max-widths是否匹配 - 新增的
text-2xl-center类在 CSS 文件里搜不到？确认你用的是 Bootstrap ≥ 5.2（5.1.x 不支持非标准键名如"2xl"），且@import "bootstrap/scss/bootstrap"前已完整覆盖$grid-breakpoints - Navbar 折叠时机错乱？它读的是
$grid-breakpoints里lg的值，但如果你在 HTML 里写了data-bs-breakpoint="lg"，而 Sass 和插件配置不一致，行为就会漂移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
