Bootstrap怎么修改Navbar导航栏链接在激活状态时的底线样式

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> 就断链

底线最麻烦的不是画出来，是它和文字 baseline 的垂直对齐关系。Bootstrap 的 .nav-link 默认 line-height: 1.5，不同字号下 baseline 浮动，border-bottom 是从 baseline 向下画的，稍不注意就“悬空”或“压字”。别依赖肉眼调值，用 rem/em + calc 配合真实设备预览。