bootstrap响应式导航栏折叠点由navbar-expand-*类决定，不可自定义像素值；需确保navbar-toggler结构完整、nav-link添加data-bs-toggle="collapse"、下拉菜单显式声明dropdown-menu-dark/light类。
bootstrap 的响应式导航栏折叠点不能通过像素值自定义，必须用预设的 navbar-expand-* 类控制——选错类或漏掉关键属性，汉堡菜单就点不动、收不回、甚至根本不出现在小屏上。
navbar-expand-* 类决定折叠临界宽度
这个类不是“在多少像素展开”，而是“从哪个断点开始默认水平展开”；小于该断点时，.navbar-collapse 隐藏、.navbar-toggler 显示。实际临界值是固定的（带 .98px 尾数），例如：
-
navbar-expand-sm：≥576px 展开 → ≤575.98px 折叠 -
navbar-expand-md：≥768px 展开 → ≤767.98px 折叠 -
navbar-expand-lg：≥992px 展开 → ≤991.98px 折叠 -
navbar-expand-xl：≥1200px 展开 → ≤1199.98px 折叠
想让导航栏在 820px 宽度下折叠？别改 CSS 媒体查询，直接换用 navbar-expand-lg——它天然满足条件。硬写 @media (max-width: 820px) 覆盖 .navbar-collapse 的 display，会破坏 JS 初始化逻辑，导致点击无响应。
navbar-toggler 不显示？检查三个硬性条件
即使加了 navbar-expand-md，汉堡按钮也可能完全不出现。这不是样式隐藏，而是结构缺失或属性错配：
- 必须有
<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"）同样需要这个属性，否则平滑滚动后菜单还开着 - 如果用了
.navbar-dark，必须同时给下拉菜单加dropdown-menu-dark类 - 如果用了
.navbar-light，但背景色较深，就加dropdown-menu-light并手动设color和background-color - 检查是否意外覆盖了 CSS 变量如
--bs-navbar-active-color，它会影响下拉项 hover 态，但开发者工具里不显眼
漏掉任一环，.navbar-toggler 就不会渲染出来——Bootstrap JS 在初始化时会根据这些属性是否存在来决定是否启用折叠逻辑。
点击链接后菜单不自动收起？补上 data-bs-toggle
移动端点击 .nav-link 后菜单仍保持展开，是因为 Bootstrap 5 默认只监听 .navbar-toggler 的点击事件，不处理导航链接。修复方式很简单：
别试图用 JS 模拟点击 .navbar-toggler——执行时机难控、多导航栏易冲突、且无法同步更新 aria-expanded 状态。
自定义颜色后下拉菜单看不清？显式设置 dropdown-menu 类
给 .navbar 换了背景色后，下拉菜单（.dropdown-menu）常变成白底黑字或黑底白字，对比度极低。这是因为 .dropdown-menu 的样式不继承 .navbar-dark 或 .navbar-light 的变量，也不响应你手动写的 background-color：
最稳妥的做法是：所有下拉菜单都显式声明主题类，不要依赖父级推导——这是最容易被忽略、也最难调试的一环。
