直接加 border-bottom 易失效，因 Bootstrap 默认样式、优先级及边框叠加逻辑干扰；须用更具体选择器（如 .navbar-nav .nav-link.active）、清除其他方向边框、拆分书写属性并确保 CSS 加载顺序正确。
直接给 .nav-link 加 border-bottom 很容易失效——不是写法错，是 Bootstrap 默认样式、优先级和边框叠加逻辑在干扰。
为什么 border-bottom 不显示或显示异常
常见现象：写了 border-bottom: 2px solid #0d6efd，但页面没反应；或者只看到一条细线、颜色不对、粗细忽大忽小。
-
.nav-link默认有border-bottom: none，但某些 Bootstrap 版本（尤其配合.navbar-nav）会继承或重置边框，仅设color或width不足以触发渲染 - 如果同时存在
border-top（如标签页默认高亮），上下边框共存会导致视觉“加粗”或错位，看起来像没生效 - 用
border-bottom简写时，若父元素设置了border-style: dashed等，可能被继承，导致实线变虚线 - Bootstrap 5 的
.nav-link.active默认只改背景和文字粗细，不自动加border-bottom，必须手动定义
正确设置 border-bottom 的 CSS 写法
关键不是“加不加”，而是“怎么加才稳”：要覆盖默认、避免继承、精准作用于激活态。
- 务必使用更具体的选择器，比如
.navbar-nav .nav-link.active，而不是泛泛的.nav-link.active - 显式清除其他方向边框：
border-top: none; border-left: none; border-right: none;，防止干扰 - 别只写
border-bottom: 2px solid #0d6efd；拆开写更可控：border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #0d6efd; - 确保你的 CSS 文件在 Bootstrap CSS 之后加载，否则规则会被覆盖
- 如果用 Vue/React 动态绑定 class，确认
active类确实出现在最终 DOM 元素上（用浏览器开发者工具检查）
border-bottom 在不同导航场景下的适配
同一套 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
用 Bootstrap 工具类快速控制 border-bottom
如果你只是临时调试或原型阶段，Bootstrap 5 内置的边框工具类比手写 CSS 更快，但要注意限制条件。
- 加下边框：
class="border-bottom"—— 但它是1px solid #dee2e6，颜色和粗细固定，无法自定义 - 清空下边框：
class="border-bottom-0"，适合配合 JS 动态切换 - 组合使用：
class="border-bottom border-bottom-2 border-primary"可以叠加宽度和颜色类（Bootstrap 5.3+ 支持border-bottom-2） - ⚠️ 工具类无法实现过渡动画（
transition），要做下划线跟随效果必须用伪元素，不能依赖工具类
真正难的不是写一行 border-bottom，而是判断它该加在哪一层选择器里、要不要清掉其他边框、会不会在 flex 换行后错位、以及在 sticky 导航或移动端键盘弹出时是否还稳得住——这些细节，往往要在真机滚动、缩放、聚焦 input 后才暴露出来。
