如何在 Bootstrap-vue 中更改导航栏链接的颜色

Posted 2023-02-22

【中文标题】如何在 Bootstrap-vue 中更改导航栏链接的颜色

【英文标题】：How to change color of Navbar Links in Bootstrap-vue

【发布时间】：2020-07-16 15:56:10

【问题描述】：

我了解它在 Bootstrap4 中是如何完成的，但同样的方法在 Bootstrap-vue 中不起作用

这是我的 Homepage.vue 文件中的代码：

<template>
  <div class="forVue">
    <div>
        <b-navbar toggleable="sm" type="dark" variant="dark">

            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

            <b-collapse id="nav-collapse" is-nav>

                <b-navbar-nav class="mx-auto">
                    <b-nav-item href="/home">Home</b-nav-item>
                    <b-nav-item href="/home">Services</b-nav-item>
                    <b-nav-item href="/home">Contact</b-nav-item>
                    <b-nav-item href="/about">About Us</b-nav-item>
                </b-navbar-nav>

            </b-collapse>

        </b-navbar>
    </div>
  </div>
</template>

以下是我在同一个文件中的样式标签内的 CSS

<style>
    .nav-item 
        color: red !important;
    
</style>

这不起作用，颜色仍然是默认值。 我也无法理解如何在不使用 !important 标签的情况下指定导航栏来更改整个导航栏的颜色。它适用于以下代码：

.navbar 
        background-color: red !important;
    

如何在没有 !important 标签的情况下让它工作？

【问题讨论】：

这能回答你的问题吗？ Change text colour with bootstrap-vue navbar item-dropdown

@BoussadjraBrahim，不，它没有。 OP 特别询问“如果没有!important，我怎样才能让它工作？”。

谢谢，我没看到

【参考方案1】：

如果您想将配色方案更改为red 变体，您可以简单地使用variant="danger"，例如：

<b-navbar toggleable="sm" type="dark" variant="danger">

<b-navbar> 支持标准 Bootstrap v4 可用的背景颜色变体。将 variant 属性设置为以下值之一以更改背景颜色：primary、success、info、warning、danger、dark 或 light。

new Vue(
  el: '#app'
)

#app  padding: 20px;.navbarmargin-bottom:10px

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <b-navbar toggleable="sm" type="dark" variant="dark">
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="mx-auto">
        <b-nav-item href="/home">Home</b-nav-item>
        <b-nav-item href="/home">Services</b-nav-item>
        <b-nav-item href="/home">Contact</b-nav-item>
        <b-nav-item href="/about">About Us</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <b-navbar toggleable="sm" type="dark" variant="danger">
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="mx-auto">
        <b-nav-item href="/home">Home</b-nav-item>
        <b-nav-item href="/home">Services</b-nav-item>
        <b-nav-item href="/home">Contact</b-nav-item>
        <b-nav-item href="/about">About Us</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
  <b-navbar toggleable="sm" type="dark" variant="primary">
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="mx-auto">
        <b-nav-item href="/home">Home</b-nav-item>
        <b-nav-item href="/home">Services</b-nav-item>
        <b-nav-item href="/home">Contact</b-nav-item>
        <b-nav-item href="/about">About Us</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

【讨论】：

但是如果我想要一种自定义颜色，一种不在 Bootstrap 标准变体中的颜色呢？

您可以通过 Bootstrap 的 SASS SCSS 变量定义您自己的主题颜色名称（带有基色），另外您可以使用我们自己的颜色覆盖默认的它们变体。见bootstrap-vue.js.org/docs/reference/theming

【参考方案2】：

要摆脱!important，您只需编写一个比当前应用的选择器更具体的选择器。

.nav-link 颜色在 BoostrapVue 中似乎具有 3 × class 的特异性，这意味着 3 × class + 1 × el 就足够了：

.nav-item.nav-item.nav-item a 
  color: red;

注意：如果您发现必须多次重复类选择器很麻烦并且在 CSS 中生成过多样板代码，我经常使用的一个技巧是使用 1 × id 人为地夸大我的选择器的特异性：

#app .nav-item a  color: red 

对此的另一个注意事项是，您甚至不需要拥有祖先 ID，因为这也可以：

body:not(#_) .nav-item a 
  color: red;

...假设您的<body> 元素没有id="_"。

在scss 中它变得更加简单，因为您只需将当前代码包装到body:not(#_) ...current code ... 中。

随着时间的推移，我发现一些 cmets 认为这种技术与使用 !important 一样糟糕，因为它还会混淆特殊性，而你最终会陷入同样的​​游戏，使编写变得越来越困难，甚至当当前的选择器需要覆盖时，更强大的选择器。

我对此的回应是，游戏规则实际上是由 CSS 的工作方式设定的。我没有制定规则，我只是在玩游戏。但最重要的部分是，通过不使用 !important，我允许 javascript 驱动的样式优先，这也是为什么使用 !important 是不好的做法的最重要原因。

---

对此类问题的更一般的答案是：检查您的元素，找出哪个规则正在应用当前值并编写一个稍微更具体的规则（或者如果您将它放在 <style> 中，则写一个同样具体的规则组件的标签，因为这是最后应用的）。

---

另请注意，您的代码必须位于<style> 标记中，即不是 scoped。如果是scoped，则以/deep/、::v-deep 或>>> 为前缀应该可以工作，但是Vue 中最近的一个尚未解决的错误会破坏<style> 标签中带有lang="scss" 的刺穿选择器，如果您的@987654345 @ 高于7.*（当前最新：8.0.2）。实际上，这意味着以下将起作用：

<style scoped lang="css">
  /deep/ .nav-item.nav-item.nav-item a 
     color: red;
  
</style>

...（lang="css" 是可选的，因为它是默认值），而

<style scoped lang="scss">
   /deep/ .nav-item.nav-item.nav-item a 
     color: red;
  
</style>

...将不起作用。

但是，这是一个（不同的）错误，它可能很快就会得到修复，届时我将删除这部分答案。

【讨论】：

我在检查 BootstrapVue 网站时选择了选择器，因为我手头没有带有 BootstrapVue 的项目。很高兴我解决了你的问题。我尽力解释了核心原理，以便您（可能还有其他人）将来可以解决此类问题。我将使用.nav-link 更新答案，以便其他人可以从中受益。

@Shahmeer：这是<b-nav-item>:<li class="nav-item"><a target="_self" href="#" class="nav-link">test</a></li> 的输出。因此.nav-link 应用于<a> 元素，而.nav-item 应用于<li>。基本上，您需要在.nav-link 和a 之间留一个空格才能使其工作。或者，如果没有空格，您可以改用 .nav-link。希望这是有道理的。干杯！

是的，我明白了！你能告诉我你从哪里检查输出吗？将来真的可以帮助我。谢谢！！

@Shahmeer 将测试项添加到您的组件并检查生成的 DOM。由于我没有 BV 项目，所以我去了https://codesandbox.io/，选择了一个 Vue 模板，将 BootstrapVue 添加到 deps 并在main.js 中设置 Vue 使用 BV。在HelloWorld.vue 我放置了<b-navbar><b-nav-item>test</b-nav-item></b-navbar>。检查并复制/粘贴生成的 DOM。 :)

如果您询问如何检查 DOM，请右键单击页面中的任何元素并选择“检查元素”。在 devtools> 元素中，您还可以右键单击并编辑为 html。可以说，最好的开发浏览器是 Google Chrome，原因有很多（最引人注目的是：a） 拥有最高的市场份额 - 所以您使用的是大多数用户的浏览器采用; b) 拥有最完整和最先进的检查和审计开发工具集），但这是完全不同的讨论。 :)