唯一可靠方式是重编译Sass并同步修改$grid-breakpoints、$container-max-widths和$navbar-breakpoint三处变量，如将md断点从768px改为840px；直接覆盖CSS媒体查询或添加自定义类名无效，因JS逻辑、容器宽度与组件行为均依赖预编译断点。
navbar-expand-*类的断点不能直接覆盖CSS媒体查询
你写 @media (max-width: 840px) { .navbar-collapse { display: none; } } 是无效的。Bootstrap 的 .navbar-expand-md 行为由预编译的 CSS 媒体查询驱动，而这些查询绑定的是 Sass 变量 $grid-breakpoints 中定义的数值（比如 md: 768px）。JS 不读你手写的媒体查询，也不检查视口宽度——它只根据 document.body 是否有 navbar-expand-md 这个类来决定是否启用折叠逻辑。
常见错误现象：.navbar-toggler 点击没反应、菜单不展开、.navbar-collapse 一直显示或一直隐藏——根本原因不是 JS 报错，而是类名和实际媒体查询不匹配。
- CDN 引入的 CSS 文件里，所有
@media规则都已固化，无法通过<style>覆盖断点逻辑 - 加
!important强行改display或max-height，只会让视觉和交互脱节（比如菜单“看起来”展开了，但 JS 认为它还是收着的） -
navbar-expand-840这种类名根本不会生效：Bootstrap 只识别预设别名（sm/md/lg等），不支持任意像素值
真正生效的修改路径：重编译 Sass 并同步更新三处变量
想让导航栏在 840px 折叠，必须本地引入 Bootstrap 源码（bootstrap/scss/），并在构建流程中前置覆盖以下三个变量：
-
$grid-breakpoints：改md: 768px→md: 840px（这是所有栅格、工具类、组件断点的源头） -
$container-max-widths：同步把md对应的宽度也改成840px下合理的值（如720px），否则.container宽度和 navbar 折叠点错位 -
$navbar-breakpoint：默认等于$grid-breakpoints(md)，但显式设成md或840px更稳妥，避免未来版本变更导致意外
导入顺序必须严格：
立即学习“前端免费学习笔记（深入）”；
$grid-breakpoints: ( xs: 0, sm: 576px, md: 840px, lg: 992px, xl: 1200px, xxl: 1400px ); $container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ); $navbar-breakpoint: md; <p>@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ...其余组件
data-bs-breakpoint 属性只复用已有断点，不能跳过 Sass 编译
Bootstrap 5.3+ 支持在 HTML 上写 data-bs-breakpoint="lg"，但它只是告诉 Navbar “用 $grid-breakpoints(lg) 的值”，而不是“监听 1024px”。如果你没重编译 Sass，lg 还是 992px，这个属性就毫无意义。
- 5.2 及更早版本完全忽略该属性，必须靠 JS 监听
resize+ 手动切.show类 - 写
data-bs-breakpoint="840"会失效：属性值必须是$grid-breakpoints中存在的键名（sm/md等），不能是像素值 - Offcanvas 也认这个属性，但同样依赖底层 Sass 变量；改了变量后，
data-bs-breakpoint="md"就真按 840px 切换
折叠菜单展开后被截断？那是 max-height 不够，和断点无关
即使断点改对了，.navbar-collapse.show 展开后内容被切掉，大概率是 max-height 设太小。Bootstrap 默认用固定值（如 1000px）做过渡动画，但遇到多行文字、大图标、动态加载内容时很容易超限。
- 别用
max-height: 100%或fit-content：它们不触发 CSS 过渡，菜单会瞬间闪现或卡住 - 稳妥做法是设一个足够大的
vh值：.navbar-collapse.show { max-height: 120vh !important; } - 如果页面有固定 header/footer，可改用
calc(100vh - 120px)，但需确保计算值大于真实内容高度
断点修改是全局性动作，牵一发而动全身；而 max-height 截断只是局部样式问题。很多人卡在这一步，反复调断点，其实根本不用动 Sass。
