如何修改Bootstrap 5中nav-tab组件的边框颜色？

问题原因 #

• 你用的是Bootstrap 3版本的nav-tabs选择器写法，和Bootstrap 5的内置选择器不匹配，优先级也低于Bootstrap 5的默认样式，所以非活跃的Tab 2样式无法覆盖生效。
• Bootstrap 5官方规范中，nav-tabs的active状态类是加在.nav-link元素上的，你当前把active写在li元素上也会导致活跃状态的样式匹配异常。

修复方案 #

1. 替换为适配Bootstrap 5的CSS代码

/* 整个标签栏底部边框 */
.nav-tabs {
    border-color: black;
}

/* 所有标签默认边框 */
.nav-tabs .nav-link {
   border-color: red;
}

/* 标签hover状态边框 */
.nav-tabs .nav-link:hover {
   border-color: blue;
}

/* 活跃标签边框 */
.nav-tabs .nav-link.active {
   border-color: green;
}

2. 调整HTML的active类位置（符合Bootstrap 5官方规范）

<ul class="nav nav-tabs mb-5">
  <li class="nav-item">
    <a class="nav-link active" href="#">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Tab 2</a>
  </li>
</ul>

如果不想调整现有HTML的active类位置，也可以单独修改活跃状态的选择器适配你的写法：

.nav-tabs li.active .nav-link {
   border-color: green;
}

内容的提问来源于stack exchange，提问作者germanshedder