更改导航栏文本颜色引导

Question

我现在有一段html，它代表我的导航栏的相关部分：

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Portfolio</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>
        </ul>
    </div>
</nav>

我有一个css，我希望用它来改变导航栏的文本颜色：

.nav.navbar-nav.navbar-right {
    color: blue;
}

唯一的问题是文本颜色保持不变。我还看到一个非常相似的问题没有解决。我打赌谁能解决这个问题，谁就能解决另一个问题。

Answer 1

.nav-link {
color: blue !important;
}

为我工作。引导v4。3.1

Answer 2

从bootstrap4开始，答案是在nav元素中简单地将navbar设置为深色，这将设置文本和指向浅色主题的链接。

<nav class="navbar navbar-dark">

Answer 3

将其设置为以下内容：

.nav.navbar-nav.navbar-right li a {
    color: blue;
}

上面将针对特定的链接，这是你想要的，而不是将整个列表样式设为蓝色，这是你最初所做的。这里是一个JsFiddle。

另一种方法是创建另一个类并按如下方式实现它：

HTML

<li><a href="#" class="color-me"><span class="glyphicon glyphicon-list-alt"></span> R&eacute;sum&eacute;</a></li>

CSS

.color-me{
    color:blue;
}

也在这个JsFiddle演示