Bootstrap-vue标签样式

时间:2018-03-27 17:01:26

标签: vuejs2 bootstrap-vue

使用bootstrap-vue时,我在单个文件组件中覆盖引导样式时遇到问题

我的文件如下:

<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”类被添加到带有nav-item classname的li父div,但css没有显示。

它在这里工作:https://jsfiddle.net/3xwmm1qt/43/但我很确定这是因为在页面渲染后加载了css。我不是百分之百。

已更新我还尝试从样式标记中删除'scoped'属性,css仍然有用。当我检查div时,它仍然没有显示出来。我仍然可以看到类名,但是在“规则”选项卡中(使用FF),我的自定义类名没有样式。

1 个答案:

答案 0 :(得分:0)

是的,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只会尝试对附加到你试图覆盖的类的元素的类进行操作,而不是作用域意味着它会做它对整个文档来说都会覆盖bootstrap的css。