直接修改 sass 变量 $grid-breakpoints 并重新编译是唯一可靠方式，硬覆盖 css 媒体查询无效；bootstrap 的 js 组件、工具类和 html 类名均依赖预编译断点值，漏掉重编译或未同步更新 $container-max-widths 等变量将导致行为异常。
Bootstrap 4/5 的 $grid-breakpoints 怎么改才生效
直接改 Sass 变量是唯一可靠方式，硬覆盖 CSS 媒体查询几乎必然失败。因为 Bootstrap 的折叠逻辑（如 navbar-collapse）依赖预编译时生成的断点类（.d-none .d-md-flex 等），运行时改 CSS 不影响这些类的行为。
常见错误现象：max-width: 991px 下导航栏仍不折叠，或折叠后点击按钮无反应——本质是 JS 判断了 document.body.classList.contains('navbar-expand-md')，而这个类名和内部 @media 规则都来自原始断点值。
- 必须在自定义 Sass 文件中
@importBootstrap 源码前，重定义$grid-breakpoints，例如：$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, // 改成 840px 就从 768px 开始折叠 lg: 992px, xl: 1200px, xxl: 1400px );
- 改完后必须重新编译 Sass，纯 CSS 替换
@media规则无效——Bootstrap 的 JS 组件（如Dropdown、Offcanvas）也读取这些断点做尺寸判断 - 如果用 CDN 或 prebuilt CSS，这条路走不通；只能换方案（见下一条）
不用 Sass 编译时怎么让 navbar 在 840px 折叠
绕过断点机制，用 data-bs-breakpoint 属性强制指定折叠阈值（Bootstrap 5.3+ 支持，旧版不支持）。
使用场景：项目已用 CDN 引入 Bootstrap，无法改动构建流程，又必须调整折叠时机。
- 给
nav元素加属性：<nav class="navbar navbar-expand-md"><div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" data-bs-breakpoint="md"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar">...</div> </div> </nav> -
data-bs-breakpoint="md"表示“按md断点逻辑折叠”，但你得先确保md对应的宽度是你想要的——这又回到第一种方式；所以更实际的做法是：用data-bs-breakpoint="sm"让它在576px折叠，或干脆写死 JS 判断 - 若用 Bootstrap 5.2 及更早版本，该属性不存在，只能手动监听
resize并切换.navbar-collapse.show类，同时控制.navbar-toggler的显示隐藏
为什么改了 $grid-breakpoints 后某些组件样式错乱
因为很多工具类（如 .col-md-6、.d-lg-block）和组件（Offcanvas 的 backdrop、Modal 的尺寸）都绑定同一套断点变量。改一个，全链路都变。
性能影响小，但兼容性风险高：第三方基于默认断点写的组件库（比如某些 Admin 模板）可能失效；container 宽度、gutter 间距也会同步偏移。
- 只改
md不改其他值，会导致lg断点类（如.d-lg-none）实际触发宽度变成992px，但视觉上你期望它在840px后才生效——断点语义就乱了 - 建议同步调整整套
$grid-breakpoints，保持相对比例，比如把md设为840px，lg设为1080px，避免中间出现空档 - 检查
$container-max-widths是否同步更新，否则.container在新md下仍用旧宽度，内容会溢出或留白异常
$container-max-widths 和 $spacer 相关响应式逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
