本文详解如何通过 css 和 bootstrap scrollspy 的激活机制，自定义导航项在页面滚动时的高亮颜色（如将当前活动链接设为红色），并兼容下拉菜单与响应式结构。
本文详解如何通过 css 和 bootstrap scrollspy 的激活机制，自定义导航项在页面滚动时的高亮颜色（如将当前活动链接设为红色），并兼容下拉菜单与响应式结构。
Bootstrap 的 scrollspy 组件会自动为当前可视区域对应的导航链接添加 .active 类——这是实现自定义样式的切入点。默认情况下，.nav-pills .nav-link.active 已有基础样式，但若需覆盖颜色（如设为红色）、字体粗细或背景，推荐使用特异性足够高且可维护的 CSS 规则。
✅ 推荐写法（支持下拉菜单 & 响应式）
/* 高亮普通导航项 */
.nav-pills .nav-link.active {
color: #dc3545 !important; /* 红色，使用 Bootstrap 红色变量更佳 */
font-weight: 600;
}
/* 高亮下拉菜单中的 active 项（关键！原答案未覆盖此场景） */
.nav-pills .dropdown-item.active,
.nav-pills .dropdown-menu .nav-link.active {
color: #dc3545 !important;
background-color: rgba(220, 53, 69, 0.1);
}⚠️ 注意事项：
- 务必加 !important：Bootstrap 5 的默认 .nav-link.active 样式权重较高（如 .nav-pills .nav-link.active），不加可能被覆盖；
- 下拉菜单需单独处理：scrollspy 会为 <a href="#id"> 元素（无论是否在下拉中）添加 .active，但 .dropdown-item 有独立样式，必须显式声明；
- 避免污染全局：使用 #navbar-example2 作为父选择器可进一步限定作用域（如 #navbar-example2 .nav-link.active），提升可复用性；
- data-bs-root-margin 优化：示例中 -40% 表示当目标元素顶部距视口底部 40% 时即触发激活，可根据实际内容高度微调（如 -20% 更灵敏）。
? 进阶提示：动态主题适配
若项目支持深色模式，可结合 @media (prefers-color-scheme: dark) 或 Bootstrap 的 .dark 类动态调整颜色：
@media (prefers-color-scheme: dark) {
.nav-pills .nav-link.active {
color: #ff6b6b;
}
}通过以上方式，无需修改 JavaScript 或引入额外库，即可精准、稳定地实现滚动高亮颜色定制，兼顾语义化、可访问性与 Bootstrap 最佳实践。
