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

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

如果您想将配色方案更改为red变体，则只需使用variant="danger"，例如：

Answer 2

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