Bootstrap 4+ 自定义断点必须修改 $grid-breakpoints Sass map，且需在 @import "bootstrap/scss/" 前定义；同步调整 $container-max-widths 和 BootstrapVue 的 breakpoints 配置，CDN 项目无法修改。
Bootstrap 4+ 能自定义断点，但必须用 $grid-breakpoints 这个 Sass map
不能只改 $screen-md-min 或类似旧变量——那是 Bootstrap 3 的写法，4+ 版本已废弃。所有媒体查询、容器宽度、栅格类生成都基于 $grid-breakpoints 这个键值对 map。你改它，整个断点系统才真正响应。
常见错误现象：.col-lg-6 依然在 992px 触发，哪怕你改了 $screen-lg-min: 1024px——因为框架压根没读这个变量，它只认 $grid-breakpoints: (lg: 1024px)。
实操要点：
- 必须在
@import "bootstrap/scss/"之前定义新$grid-breakpoints - key 名要全小写、一致（
xs,sm,md,lg,xl），新增如xxl也得加进去 - 值必须带单位（
1024px，不能写1024） - 顺序必须从小到大，否则
media query逻辑会错乱
改断点后不调 $container-max-widths，布局会“卡住”
断点变了，但容器最大宽度没跟上，就会出现：窗口宽度已过 lg 断点，.container 却还卡在旧的 960px 宽度里，左右留白变大，内容被“挤”在中间。
原因很简单：$container-max-widths 是独立变量，不会自动从 $grid-breakpoints 推导。你改了 lg: 1024px，就得同步设 $container-max-widths: (lg: 1000px) —— 值不用完全等宽，但得合理递增（比如 sm: 540px → md: 720px → lg: 1000px）。
容易踩的坑：
-
$container-max-widths的 key 必须和$grid-breakpoints完全一致，漏一个（比如没配xl）会导致对应断点下容器无约束 - 如果用了
.container-fluid，这一步可跳过；但多数后台系统仍依赖固定宽度容器
BootstrapVue 用户光改 Sass 不够，还得显式传 breakpoints 配置
写了 .col-xxl-4 却没效果？不是编译失败，是组件层根本不认识 xxl。BootstrapVue 的 ['xs', 'sm', 'md', 'lg', 'xl']。
必须在 Vue 插件注册时补全：
Vue.use(BVConfigPlugin, {
breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
});
否则即使 Sass 编译出 .col-xxl-4 类，组件也不会渲染该 class，HTML 里看不到，CSS 也压根不生效。
注意点：
- 这个配置必须早于任何
- 如果你用的是 Nuxt 或 Vue CLI 插件方式引入，得查对应插件文档看如何注入该选项
自定义断点的代价：CDN 项目无法修改，且需全链路对齐
用 CDN 引入 bootstrap.min.css？那基本没戏——Sass 变量在构建时已固化，运行时不可覆盖。想改断点，必须走本地 Sass 构建流程。
更大的隐性成本在于“全链路对齐”：除了 $grid-breakpoints 和 $container-max-widths，你还得检查：
-
$grid-gutter-width是否需要随断点拉宽一起调整（比如大屏下 gutter 太窄显得拥挤） - 是否重写了
make-container-max-widths()mixin（某些定制主题会封装它） - 第三方组件库（如 vue-admin-element）是否硬编码了断点值，导致样式脱节
最常被忽略的一点：改完断点后，别只测 .col-*-* 类，务必验证 .d-none、.d-lg-block 等显示工具类是否同步生效——它们同样依赖同一套断点 map。
