Bootstrap导航栏激活状态必须手动控制，仅通过为.nav-item添加.active类并配合aria-current="page"实现；需确保结构合规、CSS加载顺序正确、选择器精准命中且同步语义属性。
Bootstrap导航栏的激活状态必须手动控制
Bootstrap 不会根据当前 URL 自动给 .nav-link 加 .active 类，它只认 DOM 中是否真实存在这个类。你看到某个菜单高亮，是因为你（或后端模板、前端路由）主动加了 .active；没高亮，不是框架“没识别到”，而是根本没加。
常见错误现象包括：页面刷新后激活态消失、点击跳转后新页面没高亮、Vue/React 中 router-link 渲染的元素没被识别为导航项。
-
.active必须加在.nav-item元素上（Bootstrap 4/5 默认行为），不是加在.nav-link上 - 结构必须合规：
.nav-item是.nav的直接子元素，.nav-link是.nav-item的直接子元素；中间不能插<div>或其他包裹 - 下拉菜单的激活态要加在
.dropdown-toggle元素本身，不是.dropdown-menu容器 - 服务端渲染时，需在模板中判断当前路径（如
request.path == '/about'），然后给对应.nav-item加active
前端 SPA 项目中如何同步激活态
在 Vue 或 React 这类单页应用里，.active 类不会随路由自动更新，必须靠 JS 主动维护。
Vue Router 场景下，<router-link> 默认加的是 .router-link-exact-active，不是 Bootstrap 要的 .active。得用自定义 class 绑定：
<router-link
to="/contact"
:class="{ 'nav-link': true, 'active': $route.path === '/contact' }"
>Contact</router-link>
React Router（v6+）则需用 useMatch 或 useLocation 判断：
const contactMatch = useMatch('/contact');
<li className="nav-item">
<a href="/contact" className={`nav-link ${contactMatch ? 'active' : ''}`}>Contact</a>
</li>
- 别依赖
:hover或:focus模拟激活态——它们是瞬时伪类，不是持久状态 - 切换前务必先移除旧的
.active，否则多个导航项同时高亮 - 如果用了
scopedCSS（Vue）或 CSS Modules（React），确保样式能穿透到.nav-link，必要时用::v-deep或全局样式块
为什么写了 .active 却没生效
最常被忽略的原因不是逻辑错，而是选择器没命中或样式被覆盖。
Bootstrap 4/5 的默认规则是 .nav-item.active .nav-link，不是 .nav-link.active。直接写 .nav-link.active { color: red; } 一定无效。
- 检查浏览器开发者工具：确认
.active确实出现在.nav-item上，且.nav-link是它的直接子元素 - 颜色被覆盖？因为
a:visited优先级更高，必须显式覆盖：.nav-item.active .nav-link:visited { color: #0d6efd; } - 用了
.navbar-dark？得加前缀：.navbar-dark .nav-item.active .nav-link - 样式文件加载顺序错误：你的自定义 CSS 必须在
bootstrap.min.css之后引入，否则规则被忽略
语义化和可访问性不能省
仅加 .active 类只是视觉反馈，对屏幕阅读器不够友好。Bootstrap 官方推荐配合 aria-current="page" 属性使用。
这个属性不是可有可无的装饰——它告诉辅助技术“当前页面就是这个链接所代表的内容”，比单纯加类更可靠。
- 正确写法：
<a href="/home" class="nav-link active" aria-current="page">Home</a> - 值必须是
"page"，不是"true"或"active"；aria-current="true"是无效值 - JavaScript 动态切换时，记得同步设置该属性：激活项设为
aria-current="page"，其余项移除该属性 - 下拉菜单的
.dropdown-toggle激活时也应加上，否则屏幕阅读器无法感知“当前聚焦的是哪个主菜单项”
真正容易被忽略的点是：DOM 结构、CSS 加载顺序、伪类覆盖、语义属性四者缺一不可。少一个，用户就可能看不到激活态，或者看不到但读不到。
