navbar-expand-lg在≥992px时水平展开，≤991.98px时折叠为汉堡菜单；其触发折叠的宽度是lg断点前一个断点（md）的结束值，而非lg起始值本身。
navbar-expand-lg 在什么宽度触发折叠
它不是在 “lg 断点起始值” 折叠，而是在 lg 断点**之前一个断点的结束宽度**触发。比如 Bootstrap 5 默认 lg: 992px，那么 .navbar-expand-lg 实际生效的媒体查询是 @media (min-width: 992px) —— 换句话说，**≥992px 时展开为水平导航栏，
常见错误现象：.navbar-expand-lg 在 iPad 竖屏（768–991px）下仍折叠，但你误以为“lg 应该覆盖到 1024px”。其实它没毛病，只是你把“断点名”和“触发逻辑”混淆了：名字叫 lg，但控制的是“从 lg 开始保持展开”，不是“在 lg 宽度才开始响应”。
- 想让导航栏在 ≥1024px 才展开？不能只改 HTML 类名，得同步改 Sass 变量
$grid-breakpoints和$navbar-breakpoint - 只换类名为
.navbar-expand-xl，但没改断点值，那它还是在 ≥1200px 才展开（默认值），和你想要的 1024px 无关 - CDN 引入用户无法修改触发点——
.navbar-expand-lg永远绑定原始断点，改类名不改底层 CSS 就是徒劳
如何让 navbar 在 1024px 而非 992px 折叠
必须重编译 Sass，并显式覆盖两个变量：$grid-breakpoints 和 $navbar-breakpoint。只动一个，大概率失效。
示例配置（放在自定义 SCSS 文件最顶部，且在 @import "bootstrap/scss/bootstrap" 之前）：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1024px, // 关键：把 lg 改成 1024px xl: 1440px, xxl: 1920px ); $navbar-breakpoint: lg; // 关键：让 navbar-expand-lg 对应新 lg 值
为什么必须同时改这两个？
-
$grid-breakpoints决定所有col-lg-*、d-lg-block等工具类的媒体查询边界 -
$navbar-breakpoint是 Navbar 专属开关，它不自动读取lg的数值，而是按名字查$grid-breakpoints中的键值 —— 所以你设了lg: 1024px，再配$navbar-breakpoint: lg，它才真在 1024px 切换 - 漏掉
$navbar-breakpoint，即使lg已是 1024px，.navbar-expand-lg还是按旧逻辑（992px）折叠
navbar-collapse 折叠后，按钮点击无反应怎么办
这通常不是 JS 加载问题，而是 HTML 结构或属性缺失导致事件未绑定。Bootstrap 5 的折叠依赖 data-bs-toggle="collapse" 和正确的 data-bs-target 指向。
检查以下三点：
-
data-bs-target必须指向一个有id的元素，且该元素需含collapse类，例如：<div class="collapse navbar-collapse" id="navbarNav"> <li> <code>button上不能漏掉data-bs-toggle="collapse"，也不能写成旧版的data-toggle（v5 已废弃） - 如果用了自定义构建（比如只引了 CSS 没引 JS），
bootstrap.bundle.min.js或bootstrap.min.js + popper.min.js必须完整加载，否则collapse交互不工作
一个最小可运行片段：
<nav class="navbar navbar-expand-lg"><div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
</ul>
</div>
</div>
</nav>
移动端下 navbar-toggler 图标不显示或错位
.navbar-toggler-icon 是一个 SVG base64 背景图，它的渲染依赖 .navbar-toggler 的宽高和 background-size。常见破绽在自定义样式覆盖了默认尺寸。
典型干扰项：
- 给
.navbar-toggler设了padding: 0或height: auto，导致图标被裁切或缩成一条线 - 全局重置了
background-size，而.navbar-toggler-icon依赖background-size: 1.5em 1.5em - 用了
rem或em单位但根字体大小被改，图标比例失真
稳妥做法：不覆盖 .navbar-toggler 的 padding 和 font-size，如需调整尺寸，用 width/height 显式设置，并同步调 background-size：
.navbar-toggler {
width: 36px;
height: 36px;
padding: 0.375rem;
background-size: 1.25rem 1.25rem;
}
真正容易被忽略的是：**Navbar 的响应式行为完全由 CSS 媒体查询驱动，JS 不参与折叠/展开逻辑**。所以只要 CSS 编译正确、HTML 结构合规、JS 加载完整，它就该稳稳工作——出问题，八成是变量没同步、类名写错、或自定义样式悄悄劫持了关键尺寸。
