直接给 .nav-link.active 加 border-bottom 很大概率不显示，因 Bootstrap 默认重置、选择器权重不足及边框继承干扰；需用更具体选择器、显式声明宽/样式/颜色、清除其他方向边框，并确保 CSS 加载顺序正确。
直接给 .nav-link.active 加 border-bottom 很大概率不显示——不是写法错，是 bootstrap 默认重置、选择器权重不够、边框继承逻辑干扰导致的。
为什么 border-bottom 写了但没反应
常见现象包括：写了 border-bottom: 2px solid #0d6efd 却完全看不见；或只有一条极细灰线；或颜色对不上、粗细忽大忽小。
-
.nav-link默认有border-bottom: none，但某些版本（尤其配合.navbar-nav）会从父级继承border-style，仅设color或width不足以触发渲染 - 如果同时存在
border-top（比如标签页高亮），上下边框叠加会导致视觉“加粗”或错位，看起来像失效 - 用简写
border-bottom时，若父容器设置了border-style: dashed等，可能被继承，实线变虚线 - Bootstrap 5 的
.nav-link.active默认只改背景和文字粗细，不自动加border-bottom，必须手动定义
怎么写才真正生效
关键不是“加不加”，而是“怎么加才稳”：要覆盖默认、避免继承、精准作用于激活态。
- 用更具体的选择器：
.navbar-nav .nav-link.active，而不是泛泛的.nav-link.active - 显式清除其他方向边框：
border-top: none; border-left: none; border-right: none;，防止干扰 - 拆开写属性更可控：
border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #0d6efd;（只写border-bottom: ...容易被继承值覆盖） - 确保你的 CSS 文件在
bootstrap.min.css之后加载，否则规则会被覆盖 - 如果是 Vue/React 动态绑定，确认
active类确实出现在最终 DOM 的.nav-link上（用开发者工具检查）
不同导航结构下的适配要点
同一套 CSS，在顶部导航、垂直菜单、折叠态中表现完全不同，不能无脑复用。
- 顶部水平导航：用
border-bottom是自然选择，但小屏下.nav-link行高变化，建议同步加padding-bottom: calc(0.5rem + 2px)避免文字贴边 - 垂直排列（
flex-column）：border-bottom会出现在左侧，此时应改用border-left: 2px solid #0d6efd并调整padding-left - 带下拉菜单的导航项：只对最外层
.nav-link（非下拉触发按钮）加border-bottom，否则下拉箭头位置会被挤偏 - 移动端折叠后（
.navbar-collapse展开状态）：默认无边框，如需保持一致性，额外加规则如.navbar-collapse .nav-link.active
最容易被忽略的是：激活态样式依赖 DOM 结构是否真为 .nav-item.active .nav-link，而不仅是 HTML 里写了 class="active"；另外，border-bottom-width 和 border-bottom-style 必须显式声明，缺一不可——只设颜色，边框依然不可见。
