Bootstrap 导航激活态需手动控制，仅通过为 .nav-link 添加 .active 类生效，且必须确保其为 .nav-item 直接子元素；下拉项需加在 .dropdown-toggle 上，配合 aria-current="page" 更语义化；样式优先级不足时应使用更具体选择器而非 !important。
Bootstrap 导航项的激活状态必须手动控制，没有自动识别当前页或路由的功能；所谓“优点”其实是 CSS 简洁可控，“缺点”则是完全不帮你做状态同步——你得自己管好 class、语义属性和 DOM 时机。
给 .nav-link 加 .active 是唯一有效方式
Bootstrap 不会根据 URL 或点击自动加 .active，它只认这个类名是否出现在 .nav-link 元素上。样式生效的前提是结构正确：
-
.nav-link必须是.nav-item的直接子元素（不能套在<div> 里再包一层） <li>不要给 <code>.nav-item加.active，它没用；也不能只加在<a></a>外层容器上 - 如果导航项带下拉（
.dropdown-toggle），.active要加在 toggle 元素本身，不是.dropdown-menu - 搭配
aria-current="page"（非"true"）更符合语义，尤其对屏幕阅读器友好 - 别用
!important硬怼，改用更具体的选择器，比如：.navbar-nav > .nav-item > .nav-link.active - 如果用了
.dropdown-toggle，记得单独写一条：.nav-link.active.dropdown-toggle - 移除干扰类：像
nav-tabs这种会引入底边线、padding 和垂直对齐逻辑，和 navbar 不兼容 - 颜色类如
.text-white或.bg-dark可能和.active冲突，优先用原生.active规则覆盖 - 先用
document.querySelectorAll('.nav-link')拿到全部链接，统一遍历清除.active - 再给目标元素加
.active，同时设aria-current="page" - 避免用事件委托监听
.nav-link—— 动态渲染后新节点不会自动绑定，推荐在插入 DOM 后立刻绑定 - 在 SPA（如 Vue/React）中，别用
:class="{ active: isActive }"就完事，要确保首次渲染时isActive已根据路由初始化 - 如果真需要高亮某个下拉选项，得自己加 CSS：
.dropdown-menu .dropdown-item.active - 注意
.dropdown-item默认有 hover 背景，.active样式优先级要高于:hover - 别给
.dropdown-menu加.active，它只是容器，加了也没样式反应 - 移动端点击展开后，若想保持 toggle 激活态，需在
shown.bs.dropdown事件里手动加 class，而不是依赖 click
.active 样式容易被覆盖，优先级必须够高
默认的 .nav-link.active 在 navbar 中常被 .navbar-nav .nav-link 的规则压住，尤其当你混用了 nav-tabs 或自定义背景时：
JavaScript 切换 .active 的安全写法
手动切换时最常见错误是假设“总有一个已激活项”，结果 querySelector('.active') 返回 null，调用 classList.remove 报错：
Bootstrap 5 下拉菜单里的激活态很特殊
下拉菜单主项（toggle）可以激活，但子菜单项（.dropdown-item）默认不支持 .active——它的样式规则里根本没定义 .dropdown-item.active：
真正难的不是怎么加 .active，而是决定“什么时候加”“加给谁”“要不要清掉上一个”——尤其是混合了静态导航、动态菜单、路由跳转和下拉交互的场景，DOM 状态和应用状态稍有不同步，视觉就立刻露馅。
