要使 .nav-link 的 border-bottom 正常显示，需用 .nav-item.active .nav-link 选择器、设 box-sizing: content-box、padding-bottom 留空间、拆写 border-bottom 三属性、清除非底边框，并确保 css 在 bootstrap 后加载。
直接给 .nav-link 加 border-bottom 几乎肯定不显示——不是语法错，是 Bootstrap 的默认样式覆盖、box-sizing 干扰、以及选择器没命中真实 DOM 结构共同导致的。
为什么 border-bottom 写了却看不见
常见现象包括：加了 border-bottom: 2px solid #0d6efd 但完全没反应；或只看到一条极细灰线；或在激活态（active）下时有时无。
-
.nav-link默认box-sizing: border-box，但没预留底边框空间，边框被“挤”进内容区，视觉上消失 - Bootstrap 的
.navbar-nav或.nav-item级别选择器权重更高，你的规则被覆盖 - 某些版本中，
.nav-link继承了父容器的border-bottom: 0或border-style: none，仅设color和width不触发渲染 - 用了
.navbar-dark却没加前缀，导致深色主题下规则不生效
怎么写 CSS 才让底线真正显示出来
关键不是“加不加”，而是选对元素、清掉干扰、留足空间：
- 用路径选择器：
.nav-item.active .nav-link（Bootstrap 4/5 均适用），不是.nav-link.active - 显式重置
box-sizing和padding-bottom：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之后加载，否则规则无效
不同场景下的适配要点
同一套底线规则，在垂直导航、下拉菜单、移动端折叠后可能完全失效或错位：
- 垂直排列（
flex-column）时，border-bottom会出现在左侧，应改用border-left: 2px solid #0d6efd并调padding-left - 带下拉菜单的导航项，底线只加在最外层
.nav-link.dropdown-toggle上，而不是整个.dropdown容器 - 移动端折叠后（
.navbar-collapse展开状态），需额外补充：.navbar-collapse .nav-link.active - 深色模式下必须加前缀：
.navbar-dark .nav-item.active .nav-link
最容易被忽略的是 baseline 对齐细节：border-bottom 是从文字基线（baseline）向下画的，而 .nav-link 的 line-height 默认为 1.5，不同字号下 baseline 位置不同——这意味着你调好的像素值，在小屏或缩放时可能突然“偏移一像素”。
