直接修改 $grid-breakpoints 变量即可生效，但必须在引入 Bootstrap Sass 前覆盖；还需同步调整 $container-max-widths 和 BootstrapVue 的 breakpoints 配置，CDN 项目无法修改断点。
直接改 $grid-breakpoints 变量就能生效，但必须在 Bootstrap Sass 引入前覆盖
Bootstrap 4+ 的断点系统由 $grid-breakpoints 这个 Sass map 控制，不是靠一堆独立变量拼出来的。你不能只改 $screen-md-min 就完事——那只是旧版 Bootstrap 3 的写法，新版已废弃。
常见错误现象：改了 $screen-lg 却发现 .col-lg-6 还是在 992px 触发，因为 Bootstrap 已经用 $grid-breakpoints 重写了所有媒体查询逻辑，老变量只留作兼容别名。
- 正确做法是在自定义 Sass 文件（比如
assets/stylesheets/custom.scss）顶部，先定义新断点 map，再@import "bootstrap" - 示例：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1024px, // 改成 1024px 而非默认 992px xl: 1440px );
- 必须确保这个定义出现在任何
@import "bootstrap/scss/"之前，否则会被 Bootstrap 默认值覆盖
改断点后，$container-max-widths 和 $grid-gutter-width 得同步调
断点变了，容器最大宽度不跟着变，会导致布局“撑不开”或“缩太紧”。比如你把 lg 断点提到 1024px，但 $container-max-widths 里 lg 还是 960px，那在 1024–1199px 区间，容器就卡在 960px 不扩展。
使用场景：做面向大屏平板或轻办公设备的后台系统时，常需拉宽断点和容器宽度以适配 1200×800 或 1366×768 分辨率。
-
$container-max-widths必须与$grid-breakpoints同名 key 对齐，且值合理递增 - 示例补全：
$container-max-widths: ( sm: 540px, md: 720px, lg: 1000px, // 对应 lg: 1024px xl: 1400px );
-
$grid-gutter-width虽然不依赖断点，但若你同时调大了 gutter（比如从 1.5rem 改成 2rem），记得检查所有.row内部子元素的 padding 是否溢出容器
BootstrapVue 用户别漏掉 breakpoints 全局配置
用了 BootstrapVue？光改 Sass 断点还不够。组件如 <b-col></b-col>、<b-row></b-row> 的响应式行为还受 Vue 插件层控制，它默认读取的是字符串数组 ['xs', 'sm', 'md', 'lg', 'xl']，不会自动感知你 Sass 里新增的 xxl。
常见错误现象：.col-xxl-4 在 HTML 里写了，编译也通过，但页面上没效果——因为 BootstrapVue 根本不认识 xxl 这个 token。
- 必须显式传入
breakpoints配置项：Vue.use(BVConfigPlugin, { breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] }); - 如果新增了断点（比如
xxl），Sass 侧也要同步加进$grid-breakpoints，否则媒体查询不生成，类名无效 - 注意大小写一致性：Sass 里 key 是
xxl，配置里也得是'xxl'，不能写成'XXL'或'Xxl'
CDN 引入项目没法改断点，除非自己构建或用 CSS 覆盖
如果你用的是 CDN 直接加载 bootstrap.min.css，那所有断点都已硬编码进 CSS 里，$grid-breakpoints 根本不存在——那是 Sass 编译期的概念，运行时不可修改。
性能 / 兼容性影响：强行用 CSS 媒体查询覆盖（比如重写 @media (min-width: 1024px) 下的 .col-lg-6 宽度）会增加 CSS 体积，且容易被优先级更高的样式干扰；更糟的是，某些工具类（如 flex-lg-row）根本不会响应你的覆盖。
- 可行方案只有两个：换用 Sass 源码 + 自建构建流程；或接受 CDN 版本的断点限制
- 临时 workaround（仅限简单场景）：用
@custom-media+ PostCSS 插件注入新断点，但需额外构建步骤，且不被所有浏览器原生支持 - 最容易被忽略的一点：很多团队以为“改了 HTML 里的 class 就行”，比如把
col-md-6改成col-xl-6，结果发现小屏下错位——其实是因为没配好xs/sm回退规则，断点不是孤立存在的
