本文详解如何通过 css 和 bootstrap scrollspy 组件联动，为导航链接动态添加自定义高亮色（如红色），实现滚动时自动激活对应菜单项的视觉反馈。
本文详解如何通过 css 和 bootstrap scrollspy 组件联动，为导航链接动态添加自定义高亮色（如红色），实现滚动时自动激活对应菜单项的视觉反馈。
Bootstrap 的 scrollspy 组件会自动为当前可视区域对应的导航项添加 .active 类——这正是我们定制样式的切入点。默认情况下，Bootstrap 仅对 .nav-link 的 color 应用主题色（如 --bs-primary），但通过覆盖 CSS 规则，即可轻松实现个性化高亮。
✅ 正确的 CSS 定制方式
关键在于精准定位被 scrollspy 动态添加 .active 类的元素层级。在 Pills 导航中，.active 类实际作用于 <li class="nav-item"> 元素（而非 <a> 标签本身），因此需使用后代选择器：
/* 为 Pills 导航中的激活链接设置红色文字 */
.nav-pills .nav-item.active .nav-link {
color: #dc3545 !important; /* Bootstrap 的 danger 主色，或任意自定义色 */
}
/* 可选：同时高亮背景或加粗文本以增强可读性 */
.nav-pills .nav-item.active .nav-link {
font-weight: 600;
background-color: rgba(220, 53, 69, 0.1);
}⚠️ 注意事项：
- 务必使用 !important（或提高 CSS 优先级）：Bootstrap 默认样式权重较高，直接覆盖需确保规则生效；
- 避免影响下拉菜单子项：上述选择器已天然兼容 Dropdown 结构（因 .dropdown-item 不属于 .nav-pills .nav-item 范围），无需额外处理；
- 响应式兼容性：该样式在所有断点下均有效，无需媒体查询干预；
- 无障碍友好：保留 :focus 状态样式（如 box-shadow），确保键盘导航仍可见。
? 完整示例整合（含 HTML + CSS）
将以下 CSS 加入 <style> 标签或外部样式表，并确保 Bootstrap CSS 已加载：
<style>
.nav-pills .nav-item.active .nav-link {
color: #e74c3c !important;
font-weight: bold;
}
/* 可选：优化悬停与聚焦状态 */
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
color: #c0392b !important;
}
</style>配合你提供的 HTML 结构（含 data-bs-spy、data-bs-target 等属性），即可实现滚动至任意标题（如 #scrollspyHeading3）时，对应导航项（如“Third”）文字实时变为深红色并加粗。
? 进阶提示
- 若需为不同层级（如侧边栏导航、垂直 Pills）统一管理，建议提取为 SCSS 变量：
$scrollspy-active-color: #d32f2f;，再通过 @include 复用。 - 动态监听 activate.bs.scrollspy 事件可触发 JS 逻辑（如日志记录、GA 上报）：
document.addEventListener('activate.bs.scrollspy', e => { console.log('Active target:', e.target.getAttribute('href')); });
通过简洁、语义化的 CSS 覆盖，你无需修改 JavaScript 或引入第三方插件，即可安全、高效地完成 Scrollspy 的视觉定制——这是 Bootstrap 设计哲学所倡导的“约定优于配置”的典型实践。
