scrollspy 不提供高亮线样式，需用 css 伪元素或边框实现；常见方案为 .nav-link.active::after 绘制底部线，注意定位、尺寸与动画；左侧竖线需配合 position: relative/absolute 和 z-index；激活时机受 offset 和 dom 渲染影响，需动态调整或刷新。
Scrollspy 高亮线不是默认样式，得自己加 CSS
Bootstrap 4 的 scrollspy 只负责自动切换 .active 类到导航项和对应区域，**它不提供任何高亮线（下划线、左侧竖线等）的样式**。你看到的“高亮线”全是靠自定义 CSS 实现的，不是组件内置功能。
常见误解是以为加了 data-spy="scroll" 就能出线，结果发现只有文字变色——那是因为没写线的样式。
- 高亮线本质是伪元素（
::after或::before）或边框（border-bottom/border-left） - 必须作用于带
.active的<a></a>或<li>元素上 - 注意层级：如果导航用了
position: relative，伪元素需设position: absolute并配z-index
用 ::after 画底部高亮线最灵活
相比直接改 border-bottom，用伪元素画线能自由控制长度、偏移、颜色和过渡动画，且不影响原有边框布局。
.nav-link.active::after {
content: '';
display: block;
width: 60%;
height: 3px;
background-color: #007bff;
margin: 4px auto 0;
border-radius: 2px;
transition: all 0.3s ease;
}
-
width: 60%让线比文字短，视觉更轻盈；可改max-width: 80px防止过长 -
margin-top: 4px控制线离文字底边距离；margin-bottom: 0避免撑开行高 - 若要悬停时才显示线，把
::after改成.nav-link:hover::after, .nav-link.active::after
左侧竖线方案要注意 position 和 height 同步
做左侧高亮竖线时，容易忽略导航项高度变化（比如多行文本、padding 不一致），导致竖线长度错位或贴不到顶部。
- 必须给父容器（如
.nav-item）设position: relative - 竖线伪元素用
position: absolute; top: 0; bottom: 0; left: 0; width: 3px - 如果
.nav-link有display: flex或align-items: center，竖线可能被裁切——加z-index: 1并确保父级没overflow: hidden - 移动端折叠后，竖线会顶到折叠按钮旁，建议用媒体查询关掉：
@media (max-width: 767.98px) { .nav-link.active::before { display: none; } }
Scrollspy 激活时机影响高亮线“跟手度”
默认 offset 是 10，意味着滚动到目标区域顶部距视口还有 10px 时就标记为 active。这会导致高亮线提前出现，尤其在目标区有 padding 或 margin 时更明显。
- 调低
offset（如设为5）能让线切换更贴近用户视线位置 - 若目标区块高度差异大（比如有的 section 高 100vh，有的只有一屏半），单靠 offset 不够，得配合 JS 动态计算：监听
scroll，用getBoundingClientRect()判断可视比例再设 active - 别忘了在
resize时重新初始化 scrollspy：$('[data-spy="scroll"]').each(function () { $(this).scrollspy('refresh'); });
.active 就不会生效——高亮线自然也不会出来。这种情况得等 DOM 稳定后再调用 scrollspy('refresh')。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
