Bootstrap-Vue中b-tabs的active-nav-item-class样式不生效问题

问题根因 #

1. 类作用节点不匹配：active-nav-item-class属性绑定的类是挂载在导航项的外层<li>元素上，而Bootstrap Pills标签的默认激活背景色是设置在<li>内部的<a class="nav-link">子元素上，直接给外层<li>设置的背景会被内部a标签的默认背景覆盖。
2. CSS优先级不足：Bootstrap内置的.nav-pills .nav-link.active选择器优先级远高于单独的.tab-active-class类选择器，即使类挂载到正确节点，优先级不够也无法覆盖默认样式。
3. 样式加载顺序问题：如果自定义CSS的引入顺序早于Bootstrap、Bootstrap-Vue的样式文件，也会被后续加载的默认样式覆盖。

解决方法 #

方案1：适配active-nav-item-class的挂载节点调整选择器 #

修改自定义CSS的选择器，精准命中目标元素，同时提高优先级：

/* 选中加了自定义类的li下的激活状态nav-link */
.nav-pills .tab-active-class .nav-link.active {
  background-color: red;
}
/* 如果优先级仍不足可以加!important临时验证：
background-color: red !important;
*/

方案2：使用直接作用于链接元素的属性替换 #

改用active-nav-link-class属性，该属性绑定的类会直接挂载到<a class="nav-link">元素上，不需要再穿透父节点：

<b-tabs pills vertical :active-nav-link-class="'tab-active-class'">

对应CSS调整为：

.nav-pills .nav-link.tab-active-class {
  background-color: red;
}

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