Question

我了解在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标签，如何才能使它正常工作？

Answer 1

要摆脱!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 ... }中。

随着时间的流逝，我一直在评论这种技术，就像使用!important一样糟糕，因为它同时也掩盖了特异性，并且您最终陷入了同一个游戏中，使它变得越来越难当当前的选择器需要覆盖时，编写更强大的选择器。

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

对此类问题的更一般的回答是：检查您的元素，找出哪个规则正在应用当前值，并写一个稍微更具体的规则（如果将其放在{{1 }}标签，因为它是最后应用的。

还要注意，您的代码必须位于{strong> not <style>的{{1}}标记中。如果是<style>，则以scoped，scoped或/deep/开头应该可以，但是Vue中尚未解决的最新错误会破坏::v-deep中的选择器如果您的>>>在<style>以上（当前最新值：lang="scss"），请使用sass-loader标签。有效地，这意味着以下将起作用：

7.*

...（其中8.0.2是可选的，因为它是默认值），而

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

...将 不起作用 。

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

Answer 2

如果您想将配色方案更改为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;}.navbar{margin-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-Vue中更改导航栏链接的颜色

2 个答案: