Bootstrap-Vue b-tab: CSS 似乎不适用于 active-nav-item-class

Question

我正在试验 Bootstrap-Vue 中的选项卡。我正在尝试调整活动选项卡上的样式。从 https://bootstrap-vue.org/docs/components/tabs#active-classes 的文档中，我看到了这个更改活动选项卡样式的示例。我明白我要修改 active-nav-item-class 属性，像这样：

<b-tabs
    active-nav-item-class="font-weight-bold text-success"
    active-tab-class="font-weight-bold text-success"
    content-class="mt-3"
>

在我的 JSFiddle 中，您可以在 https://jsfiddle.net/b4o1kL2f/1/ 看到，我同样试图将 active-nav-item-class 设置为 class 样式 CSS, 通过与 Vue 绑定:

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

这里是 CSS:

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

但活动选项卡的背景颜色似乎没有变化。谁能发现我可能做错了什么？非常感谢！

Answer 1

class 应用于 HTML 元素，但问题是 .nav-link.active 比 .tab-active-class 具有更多的特异性，因此您必须增加 .tab-active-class

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

或

.tab-active-class {
  background-color: red !important;
}

Bootstrap-Vue b-tab: CSS 似乎不适用于 active-nav-item-class

Bootstrap-Vue b-tab: CSS does not seem to be applying to active-nav-item-class

javascript

vue.js

bootstrap-4

bootstrap-vue