必须重定义$grid-breakpoints并重编译sass，cdn或html/js修改无效；因bootstrap响应式类是编译时静态生成的，硬写@media无法改变已固化的.col-md-6等规则行为。
必须重定义 $grid-breakpoints 并重新编译 Sass，否则所有断点相关 CSS 类（包括 col-md-6、px-lg-4）都不会改变——CDN 引入或仅改 HTML/JS 完全无效。
为什么直接写 @media (min-width: 840px) 不起作用
Bootstrap 5 的响应式类是编译时静态生成的。你看到的 .col-md-6 对应的是 @media (min-width: 768px) { ... } 这条规则，它早在 CSS 文件构建完成时就已固化。你在项目 CSS 里补一条 @media (min-width: 840px)，只是新增了一条独立规则，不会影响任何 Bootstrap 类的行为。
- 你的自定义媒体查询和 Bootstrap 的栅格逻辑完全脱节，
col-md-6依然在 768px 生效 - 强行覆盖需重复写出整套栅格样式（比如重写所有
col-md-*的 flex、width、order），等于放弃框架维护性 - 工具类如
d-md-none、text-lg-center同样不会响应你的新断点
正确改法：在 Sass 中重定义 $grid-breakpoints 并同步关联变量
这是唯一官方支持、全链路生效的方式。关键不是“改一个值”，而是提供完整映射，并确保导入顺序严格正确。
- 新建
_custom-breakpoints.scss，放在所有 Bootstrap@import之前 - 先引入
@import "bootstrap/scss/functions";（否则map-get等函数不可用） - 紧接着定义完整
$grid-breakpoints，例如把md改为840px：$grid-breakpoints: ( xs: 0, sm: 576px, md: 840px, lg: 992px, xl: 1200px, xxl: 1400px );
- 再
@import "bootstrap/scss/variables";和@import "bootstrap/scss/bootstrap"; - 必须同步更新
$container-max-widths，键名与$grid-breakpoints严格一致，值略小于对应断点（如md: 792px），否则.container在 840px 时仍按旧宽度渲染，左右留白
新增断点（如 "2xl"）后，col-2xl-4 不生效？检查这些地方
新增键名后，Sass 编译器会基于它生成新类，但多个环节容易漏掉：
-
$grid-breakpoints里写了"2xl": 1600px，但$container-max-widths没加同名键 →.container在 1600px 下仍用xl宽度 - 用了 BootstrapVue？
b-col组件不读 CSS，需额外在BVConfigPlugin中配置breakpoints: ['xs','sm','md','lg','xl','2xl']，否则报Unknown breakpoint '2xl' - 组件专属断点未覆盖，例如
$navbar-breakpoint默认取$grid-breakpoints(md)，若你改了md值或新增了"2xl"，但没重设$navbar-breakpoint: 1600px，Navbar 折叠仍发生在原断点 - Sass 编译器版本低于 Dart Sass 1.33？旧版不支持带引号的键名（如
"2xl"），会静默失败
构建流程没配好，改了也白改
即使 Sass 代码写对了，如果构建工具没把它纳入编译流程，最终 CSS 还是原始文件。常见陷阱：
- 用 CDN 引入
bootstrap.min.css→ 所有变量修改都无效，因为那是预编译产物 - npm 安装了 Bootstrap，但入口文件只写了
@import "bootstrap";→ 变量覆盖被忽略，因bootstrap包内部已按默认顺序导入了variables - Vite 或 Webpack 配置没启用 Sass 支持，或
custom.scss没被主 JS/CSS 文件 import → Sass 根本没运行 - 浏览器开发者工具里查到的媒体查询仍是
@media (min-width: 992px)？说明 Sass 编译没走你的自定义文件
最易被忽略的是：改了 $grid-breakpoints 后，$container-max-widths、$navbar-breakpoint、$offcanvas-breakpoint 这些变量必须手动同步，它们彼此不联动。漏掉任何一个，布局或交互就会在新断点处出现明显错位或意外触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
