Estoy experimentando con pestañas en Bootstrap-Vue. Estoy tratando de ajustar el estilo en una pestaña activa. De la documentación en https://bootstrap-vue.org/docs/components/tabs#active-classes , he visto este ejemplo que cambia el estilo de la pestaña activa. Entiendo que debo modificar el atributo active-nav-item-class, así:
<b-tabs active-nav-item-class="font-weight-bold text-success" active-tab-class="font-weight-bold text-success" content-class="mt-3" >En mi JSFiddle que puede ver en https://jsfiddle.net/b4o1kL2f/1/ , de manera similar estoy tratando de configurar active-nav-item-class en un estilo de clase en CSS, vinculándolo con Vue:
<b-tabs pills vertical :active-nav-item-class="'tab-active-class'">Aquí está el CSS:
.tab-active-class { background-color: red; }Pero parece que el color de fondo de la pestaña activa no cambia. ¿Alguien puede detectar lo que podría estar haciendo mal? ¡Muchas gracias!
La clase se aplica al elemento HTML, pero el problema es que .nav-link.active tiene más especificidad que .tab-active-class , por lo que debe aumentar la especificidad de .tab-active-class
.nav-link.active.tab-active-class { background-color: red; }o
.tab-active-class { background-color: red !important; }