用 border-bottom 替换 bootstrap 标签页默认上边框需清除原 border-top，仅对 .nav-link.active 设置 border-bottom: 2px solid #0d6efd，并确保 css 在 bootstrap 后加载；垂直排列时改用 border-left；小屏建议禁用下划线改用背景色。
如何用 border-bottom 替换 Bootstrap 标签页默认的上边框
Bootstrap 5 默认用 border-top 实现标签页激活态的高亮，但设计稿常要求下划线样式（尤其在顶部导航型标签中）。直接加 border-bottom 不生效，是因为默认样式优先级更高，且 .nav-link 的 border-top 和 border-bottom 同时存在时会干扰视觉。
- 必须显式清除原
border-top，否则上下边框共存，看起来像加粗线 - 推荐用
border-bottom: 2px solid #0d6efd（与 Bootstrap 主色一致） - 为避免影响未激活项，只对
.nav-link.active设置，不要作用于所有.nav-link - 如果使用
flex-column垂直排列，border-bottom会出现在左侧，此时应改用border-left并调整padding-left
为什么 !important 往往不是最佳解法
Bootstrap 5 的 CSS 是通过 :root 变量 + 多层嵌套类生成的，比如 .nav-tabs .nav-link.active 的权重已经很高。盲目加 !important 容易在后续升级或主题切换时失效，且难以调试。
- 更稳妥的方式是提升选择器特异性：用
.nav-tabs > .nav-link.active或加上父容器 class（如.my-tab-group .nav-link.active） - 若项目已用 Sass，直接覆盖
$nav-link-border-width和$nav-link-active-border-color变量，编译后更干净 - 检查是否启用了
data-bs-toggle="tab"，某些 JS 初始化后会动态添加active类到.nav-item而非.nav-link，导致样式未命中
兼容性与响应式下的常见断裂点
下划线在小屏幕折叠后可能错位，尤其当标签文字换行或 nav-justified 配合 col 使用时。
- 移动端建议禁用下划线，改用背景色填充：
@media (max-width: 768px) { .nav-link.active { border-bottom: none; background-color: #f8f9fa; } } - 若标签文字过长导致
white-space: nowrap溢出，border-bottom会截断，需配合overflow: hidden或text-overflow: ellipsis - Firefox 对
border-bottom在display: inline元素上的渲染略高于其他浏览器，可加vertical-align: bottom对齐
一个最小可行的自定义 CSS 片段
不依赖 JS、不修改 Bootstrap 源码、适配默认 .nav-tabs 结构：
.nav-tabs > .nav-link {
border-top: none;
border-bottom: 2px solid transparent;
}
.nav-tabs > .nav-link.active {
border-bottom-color: #0d6efd;
}
注意：这段代码必须放在 Bootstrap CSS 之后加载；如果用 CDN，就确保你的 <link> 在 Bootstrap 的 <link> 下方。否则规则被覆盖，下划线不会出现。
真正容易被忽略的是：当标签页内容区也用了 border-top（如 .tab-content 默认有 border-top: 1px solid #dee2e6），下划线和内容区边框会紧贴，视觉上像一条粗线——这时候得同步调整 .tab-content 的 border-top 或加 margin-top 留白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
