Bootstrap-vue 选项卡样式

Posted 2023-02-23

【中文标题】Bootstrap-vue 选项卡样式

【英文标题】：Bootstrap-vue Tab style

【发布时间】：2018-09-06 04:46:06

【问题描述】：

我在使用 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 类名的 li 父 div 中，但 css 没有显示出来。

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

更新我还尝试从样式标签中删除“范围”属性，css 仍然可以工作。当我检查 div 时，它甚至都没有出现。我仍然可以看到类名，但在“规则”选项卡（使用 FF）中，我的自定义类名没有样式。

【参考方案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 将尝试仅对附加到元素的类执行此操作，这些元素具有您尝试覆盖的类而不是作用域意味着它将为因此，整个文档将覆盖引导程序的 css。

【讨论】：

这是我尝试的第一件事，但仍然没有用。 :(

我认为这是 bootstrap-vue 中的一个错误，但他们只是导入 bootstrap4 css

我猜你提供的代码 sn-p 没有的最后一个尖括号

是的，这是创建问题时的拼写错误

你用什么来捆绑？