直接改 .nav-tabs .active 的 border-bottom 不行，因其为静态样式，无法平滑移动、自适应宽度变化或居中对齐，且在文字换行、缩放或 flex 重排时与激活项脱节；须用 .nav-tabs::after 伪元素配合 JS 动态计算 left/width，并在 Tab 切换、resize、字体加载完成时更新，位移需基于相对坐标系并优先使用 transform 实现丝滑动画。
为什么直接改 .nav-tabs .active 的 border-bottom 不行
因为 Bootstrap 4 默认用 border-bottom 表示激活态，但它是静态样式，无法平滑移动、无法跟随 Tab 宽度变化、也不支持居中对齐或自定义宽度。一旦 Tab 文字换行、缩放、或容器 flex 布局重排，border-bottom 就卡死在父元素底边，和实际激活项完全脱节。
用 ::after 伪元素实现可定位滑块的关键条件
必须保证伪元素能精准定位到目标 Tab 项下方，并随其尺寸动态调整。这要求：
-
.nav-item不能设position: relative（否则::after的left/width会基于每个 item 自身计算，无法统一控制） - 滑块容器（即
.nav-tabs）需设position: relative，让::after相对于它定位 -
::after必须和.nav-link.active同级渲染，所以得用.nav-tabs::after，再通过 JS 动态设置left和width - 不能依赖
offsetLeft或getBoundingClientRect().left直接赋值——必须减去.nav-tabs自身的getBoundingClientRect().left，否则滚动或缩放后偏移
JS 动态更新滑块位置时最容易漏掉的三个时机
只在点击后更新一次，90% 的情况都会错位。真正需要监听并重算的有：
- 每次 Tab 切换完成后的
requestAnimationFrame回调里读取新.nav-link.active的位置（确保 DOM 已重排） -
window.addEventListener('resize', ...)—— 横竖屏切换、浏览器缩放、窗口拖拽都会改变 Tab 宽度 - 字体加载完成事件：
document.fonts.ready.then(...)，尤其用了 Google Fonts 时，文字宽度变化会直接影响getBoundingClientRect().width
用 transform: translateX() 替代 left 的硬性前提
想让滑块动画丝滑且不触发重排，必须用 transform，但前提是：
立即学习“前端免费学习笔记（深入）”；
- 滑块
::after的position必须是absolute，且父容器.nav-tabs是relative - 位移值 =
activeEl.getBoundingClientRect().left - tabsEl.getBoundingClientRect().left + activeEl.offsetWidth / 2 - sliderWidth / 2（居中对齐时） - 必须用
element.style.transform = 'translateX(' + x + 'px)'，不能混用left和transform，否则首次动画跳变 - 如果
.nav-tabs有padding-left，要额外从位移值里减去它，否则滑块整体右偏
滑块不准从来不是 CSS 写错了，而是坐标系没对齐、更新时机没卡准、或者 transform 和 layout 属性混用了。最常被忽略的是字体加载完成后的重算——哪怕页面看起来“已经渲染好了”，文字宽度可能还没稳定。
