bootstrap 默认不给 .nav-link.active 加底边框，仅通过颜色、粗细或背景变化表达激活态；需手动编写高特异性 css（如 .nav-item.active .nav-link）并重置 box-sizing、padding 等干扰项才能生效。
为什么.nav-link.active没底线？
Bootstrap 默认不给 .nav-link.active 加底边框，它只靠颜色、粗细或背景变化来表达激活态。如果你看到的是纯文字高亮，那不是 bug——是设计如此。想加底线，得自己写 CSS 规则，且必须确保选择器能准确命中 DOM 中的真实结构（.nav-item.active .nav-link）。
怎么加底线才生效？
直接写 .nav-link.active { border-bottom: 2px solid #0d6efd; } 很可能无效，原因有三：选择器没对上、被父级样式覆盖、或 border-bottom 被 box-sizing 或 padding 干扰。
- 用路径选择器：
.nav-item.active .nav-link { border-bottom: 2px solid #0d6efd; } - 显式重置
box-sizing和padding-bottom，避免撑开或遮挡：padding-bottom: calc(0.5rem + 2px); - 如果用了
.navbar-dark，记得加前缀：.navbar-dark .nav-item.active .nav-link - 移动端点击瞬间要反馈？补上
:active状态：.nav-item.active .nav-link:active { border-bottom-width: 3px; }
底线和文字颜色冲突怎么办？
加了底线后文字变模糊、发虚，大概率是 border-bottom 和 line-height / font-size 不匹配，导致文字被“顶”出视觉基线。这不是渲染错误，是排版塌陷。
- 统一用
em或rem单位，比如：border-bottom: 0.125rem solid #0d6efd; - 避免同时设
border-bottom和padding-bottom过大，优先用margin-bottom控制间距 - 检查是否启用了
text-rendering: optimizeLegibility;—— 它会让带边框的文字渲染异常，临时关掉试试
下拉菜单的激活底线怎么处理？
下拉项（.dropdown-item）和顶部导航项（.nav-link）的激活逻辑不同：前者可直接用 .dropdown-item.active，但顶部的 .dropdown-toggle 激活时，底线必须加在 toggle 元素本身，而不是整个 .dropdown 容器。
- 顶部 toggle 激活底线：
.nav-item.dropdown.show > .nav-link.dropdown-toggle, .nav-item.active > .nav-link.dropdown-toggle - 下拉列表中激活项底线：
.dropdown-menu .dropdown-item.active - 别漏掉
aria-current="page"的语义同步，否则屏幕阅读器无法感知“这个 toggle 当前代表什么”
border-bottom 是从文字 baseline 向下画的，而 Bootstrap 的 .nav-link 默认 line-height 是 1.5，不同字号下 baseline 位置浮动。真正在意像素级精准时，得用 transform: translateY() 微调，而不是硬改 padding。
