Bootstrap修改Navbar激活状态链接底线样式

很多开发者在使用 Bootstrap 导航栏时，都希望为激活状态添加底边框样式，但往往发现 border-bottom 设置后页面毫无变化。问题并非出在 CSS 写法上，而是 Bootstrap 本身并未为 .nav-link.active 预设底边框。它默认通过颜色深浅、字体粗细或背景色变化来表达链接被选中。当你试图添加 border-bottom 时，通常会被以下因素影响：

为何 .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-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 是它的直接子元素——中间插入
  会导致断链

  底线最麻烦的不是画出来，而是与文字 baseline 的垂直对齐关系。Bootstrap 的 .nav-link 默认 line-height: 1.5，不同字号下 baseline 浮动，border-bottom 从 baseline 向下绘制，稍不注意就会出现“悬空”或“压字”现象。建议使用 rem/em 配合 calc 进行真实设备预览，避免依赖肉眼调整。