直接改CSS媒体查询无效，因为Bootstrap的JS只依据Sass变量（如$grid-breakpoints）编译后的类名（如.navbar-expand-md）判断断点，不读取自定义媒体查询；必须重定义$grid-breakpoints并重新编译Sass，同时同步更新$container-max-widths和$navbar-breakpoint，否则JS与CSS行为脱节。
直接改 CSS 媒体查询为什么没用
你写了 @media (max-width: 840px) { .navbar-collapse { display: none; } }，但点击汉堡图标没反应——这不是 CSS 没生效，而是 Bootstrap 的 JS 根本不看这条规则。它只认 document.body.classList.contains('navbar-expand-md') 这个类是否存在，而这个类名是否添加、何时添加，全由 Sass 编译时的 $grid-breakpoints 决定。硬加媒体查询，JS 不会同步切换 .show 类，.navbar-toggler 的显隐逻辑也脱节。
重编译 Sass 是唯一可靠路径
想让导航栏在 840px 折叠，必须改 $grid-breakpoints 并重新编译。不能只改一处：
- 在自定义 Sass 文件中，
@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/variables"之前，重定义完整 map： $grid-breakpoints: ( xs: 0, sm: 576px, md: 840px, lg: 992px, xl: 1200px, xxl: 1400px );- 同步更新
$container-max-widths，否则容器宽度和 navbar 行为错位 - 如果用了
$navbar-breakpoint: md，也要确认它指向的是你刚改过的md - 构建流程必须走 Sass 编译（Webpack、Vite 或命令行
sass），替换生成的 CSS 文件无效——JS 在运行时读的是编译前变量值
CDN 项目怎么临时绕过断点限制
Bootstrap 5.3+ 支持 data-bs-breakpoint="sm" 属性，但它不是“自定义像素”，只是复用已有断点逻辑。比如：
-
<nav class="navbar navbar-expand-md" data-bs-breakpoint="sm"></nav>表示按sm断点（≤575.98px）折叠 - 旧版本（5.2 及更早）根本不识别该属性，只能手写 resize 监听 + 手动切换
.show类和.navbar-toggler显隐 - 别指望
data-bs-breakpoint="840"这种写法，Bootstrap 不解析数字字符串
折叠菜单展开后被截断怎么办
即使断点改对了，.navbar-collapse.show 里的内容被切掉，大概率是 max-height 不够，不是断点问题：
- 默认
.navbar-collapse.show有max-height: 300px（或类似值），内容多时直接截断 - 加一条 CSS：
.navbar-collapse.show { max-height: none; }或设为足够大的值（如500px） - 注意：不要只改
height，它不触发滚动；max-height才是关键
$container-max-widths 或跳过重编译，表面看起来动了，实际处处错位。 
