本文详解如何通过 css 覆盖 bootstrap 默认样式，为 scrollspy 导航中的当前激活项（active link）设置自定义颜色（如红色），并确保下拉菜单项、平滑滚动与响应式行为正常工作。
本文详解如何通过 css 覆盖 bootstrap 默认样式，为 scrollspy 导航中的当前激活项（active link）设置自定义颜色（如红色），并确保下拉菜单项、平滑滚动与响应式行为正常工作。
Bootstrap 的 Scrollspy 组件会自动为导航中与当前视口位置匹配的 <a> 链接添加 .active 类（作用于 <li> 元素），而非直接添加在 <a> 标签上。因此，若想修改激活链接的文字颜色，不能仅针对 .nav-link.active，而需利用父级 .active 状态进行层叠选择。
✅ 正确的 CSS 自定义方式
/* 为 Pills 导航中处于 active 状态的 nav-item 下的 nav-link 设置红色 */
.nav-pills .nav-item.active > .nav-link {
color: #dc3545 !important; /* 红色，推荐使用 Bootstrap 的 $danger 值 */
}
/* 可选：同时高亮下拉菜单中的 active 项（如第三、四、五标题对应项） */
.nav-pills .nav-item.dropdown .dropdown-menu .dropdown-item.active {
color: #dc3545 !important;
background-color: rgba(220, 53, 69, 0.1);
}⚠️ 注意：!important 在此场景中常需保留，因为 Bootstrap 5 默认对 .nav-link 的 color 设有较高优先级（尤其在悬停/焦点状态）。若项目已启用 CSS-in-JS 或构建工具（如 Sass），建议改用更优雅的方式——在自定义 Sass 变量中覆盖 $link-color 或扩展 .nav-link，避免全局 !important。
✅ 完整 HTML + CSS 示例（可直接运行）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Scrollspy 自定义颜色</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.nav-pills .nav-item.active > .nav-link,
.nav-pills .nav-item.dropdown .dropdown-menu .dropdown-item.active {
color: #dc3545 !important;
}
/* 可选：提升可访问性 —— 保持 focus 状态可见 */
.nav-link:focus {
outline: 2px solid #0d6efd;
outline-offset: 2px;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="bg-light">
<nav id="navbar-example2" class="navbar bg-white px-3 mb-3 shadow-sm">
<a class="navbar-brand" href="#">Scrollspy Demo</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div class="container mt-4">
<div class="scrollspy-example bg-white p-4 rounded border" style="height: 400px; overflow-y: auto;">
<h4 id="scrollspyHeading1">First heading</h4>
<p>内容段落…（重复数次以撑开高度）</p>
<h4 id="scrollspyHeading2">Second heading</h4>
<p>内容段落…</p>
<h4 id="scrollspyHeading3">Third heading</h4>
<p>内容段落…</p>
<h4 id="scrollspyHeading4">Fourth heading</h4>
<p>内容段落…</p>
<h4 id="scrollspyHeading5">Fifth heading</h4>
<p>内容段落…</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>? 补充说明与最佳实践
- Scrollspy 触发逻辑：Bootstrap 默认基于 offsetTop 判断元素是否进入视口；data-bs-root-margin="0px 0px -40%" 表示将视口底部向上收缩 40%，使激活时机更早，适合标题靠上布局。
- 下拉菜单支持：.dropdown-item 的激活状态由 Scrollspy 自动管理，但需额外 CSS 显式样式化（如上所示）。
- 无障碍友好：请勿移除 :focus 样式；若禁用默认聚焦轮廓，请提供等效视觉反馈。
- 进阶定制：如需动态控制颜色（如按章节变色），可监听 scroll 事件 + getBoundingClientRect() 手动计算，但通常原生 Scrollspy + CSS 已满足绝大多数需求。
通过上述方式，你无需修改 JavaScript 行为，即可安全、轻量、可维护地实现 Scrollspy 激活链接的个性化配色。
