bootstrap导航栏折叠临界点由navbar-expand-*类决定，非自定义像素值；如navbar-expand-md表示≥768px展开、≤767.98px折叠，且必须确保navbar-toggler结构完整、data-bs-toggle属性正确、类加在nav根元素上。
navbar-expand-* 类决定折叠临界点，不是“在多少像素折叠”，而是“从哪个断点开始展开”
Bootstrap 导航栏的折叠行为由 navbar-expand-* 类控制，它不表示“在 820px 折叠”，而表示“≥该断点宽度时水平展开”。小于该断点时，.navbar-collapse 隐藏、.navbar-toggler 显示。实际临界值带 .98px 尾数（如 navbar-expand-md 对应 ≤767.98px 折叠），这是媒体查询计算结果，不可跳过或微调。
常见误操作是写个 @media (max-width: 820px) 强制隐藏 .navbar-collapse——这会让 JS 失去控制权，点击汉堡图标无响应，因为 Bootstrap 的 JS 初始化逻辑依赖 navbar-expand-* 类是否存在来绑定事件。
-
navbar-expand-sm：≤575.98px 折叠（适配手机竖屏） -
navbar-expand-md：≤767.98px 折叠（适配横屏手机 / 小平板） -
navbar-expand-lg：≤991.98px 折叠（常规平板尺寸） -
navbar-expand-xl：≤1199.98px 折叠（小桌面或大平板横屏）
想让导航栏在 840px 或 1024px 折叠？必须重编译 Sass，不能只改 HTML 类名
直接把 navbar-expand-md 换成 navbar-expand-lg 可以覆盖 840px 场景（因 lg 默认 ≥992px 展开，840px 自然折叠），但若你明确需要 840px 或 1024px 这类非标准断点，唯一可靠路径是修改 Sass 变量并重新编译 CSS。
只改 $grid-breakpoints 不够——JS 组件（包括 Navbar 折叠逻辑）还依赖 $navbar-breakpoint 变量来定位断点名称。漏掉任一，行为就会脱节。
- 在自定义 SCSS 文件顶部（必须在
@import "bootstrap/scss/bootstrap"之前）覆盖两个变量： $grid-breakpoints: ( xs: 0, sm: 576px, md: 840px, lg: 992px, xl: 1200px );-
$navbar-breakpoint: md;（让navbar-expand-md真正对应 840px） - CDN 或 npm 安装的官方 CSS 无法生效；必须本地走 Sass 编译流程（如
sass custom.scss:bootstrap.css）
navbar-toggler 不显示？检查三个硬性条件是否全部满足
即使写了 navbar-expand-md，.navbar-toggler 仍可能完全不渲染——这不是样式问题，而是结构缺失导致 JS 跳过初始化。
-
<button class="navbar-toggler"></button>必须存在，且含data-bs-toggle="collapse"和data-bs-target="#navbarContent" - 被折叠内容（如
<ul class="navbar-nav"></ul>）必须包裹在<div class="collapse navbar-collapse"> 内，且该 <code>div的id必须与data-bs-target值**完全一致** -
navbar-expand-*类必须加在<nav class="navbar"></nav>根元素上，不能只加在子容器里 - 给每个
.nav-link加data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show" - 用
.navbar-collapse.show而非#navbarContent，避免误关其他 collapse 区域 - 锚点链接（如
href="#about"）同样需要该属性，否则平滑滚动后菜单仍开着 - 别用 JS 模拟点击
.navbar-toggler——时机难控，且无法同步更新aria-expanded状态
任意一条缺失，Bootstrap JS 都不会注册折叠逻辑，.navbar-toggler 就不会出现在 DOM 中。
点击 nav-link 后菜单不收起？补 data-bs-toggle="collapse" 属性
Bootstrap 5 默认只监听 .navbar-toggler 的点击事件，.nav-link 点击后菜单保持展开是正常行为，不是 bug。
最易忽略的是：所有这些属性都必须在 DOM 加载完成前就写在 HTML 里，否则 JS 初始化时读不到，事件绑定失败。
