Bootstrap默认不给.nav-link.active加底边框，仅通过颜色、粗细或背景表达激活态；需用.nav-item.active .nav-link选择器，重置box-sizing和padding，拆分border属性并清除其他方向边框，且CSS须在bootstrap.min.css后加载。
为什么 .nav-link.active 加 border-bottom 没反应
不是写法错，是 Bootstrap 默认不给 .nav-link.active 设底边框——它只靠颜色、粗细或背景变化表达激活态。你写的 border-bottom: 2px solid #0d6efd; 很可能被以下三类干扰盖掉：
• .nav-link 默认有 box-sizing: border-box，但没预留底边框空间，导致边框“挤”进内容区，视觉上消失
• 父级 .nav-item 或 .navbar-nav 的选择器权重更高，你的规则被覆盖
• 某些版本中，.nav-link 继承了父容器的 border-style: none 或 border-bottom: 0，仅设 color 和 width 不触发渲染
怎么写 CSS 才让底线真正显示出来
关键不是加不加，而是选对元素、清掉干扰、留足空间：
- 用路径选择器，别偷懒：
.nav-item.active .nav-link（Bootstrap 4/5 均适用），不是.nav-link.active - 显式重置 box-sizing 和 padding：
box-sizing: content-box;+padding-bottom: calc(0.5rem + 2px);（假设底线宽 2px） - 拆开写 border 属性，避免继承污染：
border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #0d6efd; - 清除其他方向边框，防止叠加干扰：
border-top: none;border-left: none;border-right: none; - 确保你的 CSS 文件在
bootstrap.min.css之后加载，否则规则无效
深色模式、下拉菜单和移动端的特殊处理
同一套底线规则，在不同上下文里会失效或错位：
- 用了
.navbar-dark？必须加前缀：.navbar-dark .nav-item.active .nav-link - 下拉菜单的顶部 toggle 激活时，底线要加在
.nav-link.dropdown-toggle上，而不是整个.dropdown容器：.nav-item.dropdown.show > .nav-link.dropdown-toggle - 下拉列表里的激活项是
.dropdown-menu .dropdown-item.active，和顶部导航分开处理 - 移动端折叠后（
.navbar-collapse展开状态），需额外补充：.navbar-collapse .nav-link.active - 文字发虚、 baseline 错位？换单位：
border-bottom: 0.125rem solid #0d6efd;（比 px 更稳），并检查是否启用了text-rendering: optimizeLegibility;
React/Vue 项目里样式不生效的常见卡点
不是 CSS 写错了，是 class 没挂到对的地方：
- React Router 的
NavLink默认加的是active类（无点号），不是.active；得用className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'} - Vue Router 的
<router-link>默认加router-link-exact-active，要写.router-link-exact-active .nav-link - Vue 单文件组件加了
scoped？CSS 不穿透，得用::v-deep(.nav-item.active .nav-link)或移出 scoped 块 - 检查 DevTools：确认
.active真的出现在.nav-item上，且.nav-link是它的直接子元素——中间插个<div>就断链
.nav-link 默认 line-height: 1.5，不同字号下 baseline 浮动，border-bottom 是从 baseline 向下画的，稍不注意就“悬空”或“压字”。别依赖肉眼调值，用 rem/em + calc 配合真实设备预览。 
