Bootstrap 5 navbar响应式需三要素匹配：navbar-expand-*类、navbar-collapse容器、正确data-bs-target；JS须加载bootstrap.bundle.min.js；断点选择影响展开时机；动画和图标可定制但需遵循CSS权重规则。
Bootstrap 5 的 navbar 默认就是响应式的，但需要正确结构
不是加个 navbar-expand-* 类就万事大吉。关键在于：折叠触发点、折叠容器、按钮三者必须严格匹配。常见错误是漏掉 navbar-collapse 包裹导航项，或把 navbar-toggler 放错位置。
-
navbar必须有navbar-expand-{breakpoint}（如navbar-expand-md），否则在所有断点都折叠 -
navbar-toggler的data-bs-target必须指向.navbar-collapse的 ID 或 class（推荐用 ID，更可靠） - 所有可折叠的导航项（
nav-link、dropdown等）必须放在div.navbar-collapse内部，不能在外层直接写 - 如果用了自定义 JS 控制折叠，要确保调用的是
bootstrap的collapse实例，而非手动 toggle class
为什么小屏幕下点击 navbar-toggler 没反应？
大概率是 JS 加载失败或 DOM 结构不合法。Bootstrap 5 完全依赖 bootstrap.bundle.min.js（含 Popper），只引 bootstrap.min.js 会导致 navbar-toggler 无法初始化。
- 检查浏览器控制台是否报错
TypeError: Cannot read property 'toggle' of null—— 这说明data-bs-target指向的元素不存在 - 确认
navbar-collapse有唯一 ID，且data-bs-target值为#id-name（带 # 号） - 不要在
document.body尚未加载完成时就初始化 navbar，避免 DOM 查找不到 - 若使用 Webpack/Vite，确保
bootstrap已正确 import 并执行，而不是仅声明
navbar-expand- 后缀选 sm、md 还是 lg？
后缀决定「从哪个断点开始默认展开」。选错会直接导致桌面端也折叠，或移动端永远不折叠。
-
navbar-expand-sm：≥576px 展开（即手机横屏就展开，一般不推荐） -
navbar-expand-md：≥768px 展开（平板竖屏起展开，最常用） -
navbar-expand-lg：≥992px 展开（桌面窄屏才展开，适合内容多的导航） - 注意：Bootstrap 5 的断点值是固定的，不要凭感觉改 CSS 类名，否则媒体查询不生效
自定义折叠动画或修改汉堡图标颜色？
动画由 .navbar-collapse 的 CSS transition 控制，默认是 height .35s ease；图标颜色则来自 .navbar-toggler-icon 的 background-image SVG 编码。
- 改动画：覆盖
.navbar-collapse.collapse.show和.navbar-collapse.collapse的height和visibility，别只动max-height - 改图标：重写
.navbar-toggler-icon的background-image，用url("data:image/svg+xml,%3csvg...")格式，注意 URL 编码 - 不要用
!important强行覆盖，优先提高 CSS 选择器权重（如加.navbar-dark .navbar-toggler-icon） - 如果用了 Sass，直接在
$navbar-dark-toggler-icon变量里改，比覆盖更干净
实际项目里最容易被忽略的是：navbar 外层容器没加 container 或 container-fluid，导致折叠后内容溢出视口，又查不出原因。
