Bootstrap - 选项卡视图样式

Question

我在使用 bootstrap-vue

时无法覆盖单个文件组件中的 bootstrap 样式

我的文件如下所示：

<template>
  <b-tabs pills vertical>
    <b-tab title="This title" title-item-class="mytab" acitve>
      Some tab
    </b-tab>
    <b-tab title="This title 2" title-item-class="mytab">
      Some other tab
    </b-tab>
 </b-tabs>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
  
  .nav-pills .mytab .nav-link:not(.active) {
    background-color: red !important;
  }
  
  .nav-pills .mytab .nav-link {
    background-color: blue !important;
  }
  
  .tab-content > .tab-pane {
    border: 1px solid;
    border-left: 0px none;
  }
</style>

我可以检查我的组件，我可以看到 "mytab" class 被添加到 li parent divs with nav-item classname 但css 没有显示。

它在这里工作：https://jsfiddle.net/3xwmm1qt/43/ 但我很确定这是因为 css 在页面呈现后加载。我对此不是100％。

已更新 我还尝试从样式标签中删除 'scoped' 属性，但 css 仍然有效。当我检查 div 时，它仍然没有出现。我仍然可以看到 class 名称，但在“规则”选项卡中（使用 FF）我的自定义 class 名称没有样式。

Answer 1

是的，jsfiddle 和您的代码之间的区别在于您编写了作用域CSS（更少）：

修复方法如下，从样式中删除作用域：

<style lang="less">

  .nav-pills .mytab .nav-link:not(.active) {
    background-color: red !important;
  }

  .nav-pills .mytab .nav-link {
    background-color: blue !important;
  }

  .tab-content > .tab-pane {
    border: 1px solid;
    border-left: 0px none;
  }
</style>

Scoped 意味着 css 代码将仅在该元素中起作用，vue 将尝试仅对附加到具有 class 元素的 classes 执行此操作试图覆盖而不是范围意味着它将对整个文档执行此操作因此将覆盖 bootstrap 的 css.

Bootstrap - 选项卡视图样式

Bootstrap-vue Tab style

vuejs2

bootstrap-vue