必须重定义$grid-breakpoints并重新编译，CDN引入的CSS断点已固化；直接写媒体查询或覆盖.container无效，因Bootstrap预编译规则权重更高且栅格类仍绑定原断点，导致容器与列宽错位。
$grid-breakpoints 必须重定义并重新编译，CDN 引入的 CSS 文件里断点已固化，改不了。
为什么直接写媒体查询或覆盖 .container 无效
你加一条 @media (min-width: 1024px) { .container { max-width: 1280px; } }，浏览器可能根本不用它——因为 Bootstrap 编译出的 @media (min-width: 992px) 规则在 CSS 文件里排得更靠后、权重相同，自然胜出。更糟的是，col-lg-6 这类类名的样式规则仍绑定在 992px 下，你改了容器宽度，栅格列宽却没变，内容会错位。
常见错误现象：
-
col-lg-6在 1024px 屏幕上还是按 992px 断点渲染 - 开发者工具里看到的媒体查询始终是原始值（比如
@media (min-width: 992px)） - 手动给
<div class="container">加style="max-width: 1200px"，结果手机屏横向溢出
重定义 $grid-breakpoints 的正确顺序和约束
顺序错了，变量就被默认值覆盖，编译后断点纹丝不动。必须严格按以下顺序组织 Sass 文件：
- 先
@import "bootstrap/scss/functions";（确保map-get等可用） - 再定义你的
$grid-breakpoints，完整包含xs、sm、md、lg、xl、xxl六个键，不能增删，不能拼错 - 值必须是带单位的长度，例如
lg: 1024px，不能写1024或"1024px" - 最后
@import "bootstrap/scss/variables";和后续所有@import
示例：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1440px, xxl: 1920px ); @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; // ...其余导入
必须同步更新的关联变量
只改 $grid-breakpoints，不碰其他变量，页面会在新旧断点交界处“卡住”。比如把 lg 提到 1024px，但 $container-max-widths 里的 lg 还是 960px，结果在 1024–1199px 区间，.container 死卡在 960px，左右留白严重。
-
$container-max-widths键名必须和$grid-breakpoints完全一致（包括顺序），且值要合理递增；xs不需要出现在其中 - Navbar、Offcanvas 等组件有硬编码断点，如
$navbar-breakpoint默认等于$grid-breakpoints(md)，必须显式重写，例如$navbar-breakpoint: lg;或$navbar-breakpoint: 1024px; - 搜索
bootstrap/scss/_variables.scss中所有含-breakpoint的变量，一并覆盖
用了 BootstrapVue 或类似封装库怎么办
Vue 组件（如 <b-col lg="6">）不解析 Sass，而是靠初始化时传入的 breakpoints 数组识别 token。你改了 $grid-breakpoints，但没告诉 Vue 插件，它压根不认识 xxl 或你自定义的 2xl。
- BootstrapVue 需在插件注册时显式传入
breakpoints数组，例如：breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] - 如果新增了断点（如
xxxl），这个数组也得加上，否则组件行为不会响应 - 纯 CDN + JS 动态加类（如
el.classList.add('col-xxl-4')）同样无效——CSS 类根本没生成
$grid-breakpoints 就万事大吉，结果 $navbar-breakpoint 还卡在旧值，导航栏折叠时机和栅格列宽彻底脱节。 
