javascript - 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"
>

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

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

这是CSS：

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

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

标签： javascriptvue.jsbootstrap-4bootstrap-vue

Answer 1

该类适用于 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;
}