Bootstrap如何修改Tab选项卡在被点击时的背景高亮及边框样式-Bootstrap教程-PHP中文网

直接改.nav-link.active没反应是因为选择器权重不足且未完整覆盖样式属性；必须用.nav-tabs .nav-link.active或.nav-pills .nav-link.active等高特异性选择器，同时设置background-color、border-color、color及border-bottom的width/style/color，并补充:focus-visible和确保tab-pane含show类。

bootstrap如何修改tab选项卡在被点击时的背景高亮及边框样式

直接改 .nav-link.active 没反应，是因为选择器权重不够，且没覆盖完整样式属性。必须用高特异性选择器，同时处理背景、边框、文字色三者，否则只改其中一项会残留默认效果。

为什么 `.nav-link.active` 单独写无效？

Bootstrap 5 默认用 .nav-tabs .nav-link.active 和 .nav-pills .nav-link.active 控制激活态，这两个组合选择器的权重远高于你写的单类名规则。浏览器按“谁更具体谁赢”执行层叠，不是“谁在后面谁生效”。

常见现象：background-color 改了但文字还是灰色，或边框颜色变了但粗细没变
错误写法：.nav-link.active { background: blue; } —— 权重不足，被 Bootstrap 原生规则压掉
正确写法：.nav-tabs .nav-link.active（用于顶部横排 tab）或 .nav-pills .nav-link.active（用于胶囊形 tab），二者不能省略任一

怎么改背景色 + 边框底线？

nav-tabs 的激活底线是 border-bottom，不是伪元素；要让它显出来，得同时设置颜色、宽度、样式，还要防父容器背景遮挡。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

border-bottom-color 和 border-bottom-width 必须一起写，只设 color 不行（默认 width 是 0）
如果 .nav-tabs 有浅灰背景，可能盖住细线，建议把 background-color 显式设为透明或同色系
移动端小屏下 nav-link 高度压缩，border-bottom 容易被截断，加 padding-bottom: 2px 预留空间

示例：

.nav-tabs .nav-link.active {
  background-color: #0d6efd !important;
  color: #fff !important;
  border-color: #0d6efd !important;
  border-bottom: 3px solid #0d6efd !important;
}