更改Bootstrap导航栏文字颜色

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;
}

唯一的问题是文本颜色仍然不变。 我还看到一个非常相似的问题没有解决。我敢打赌，能够解决这个问题的人也能够解决那个问题。

- Quinn McHugh

---

你可能还需要针对li进行定位。你试过.nav.navbar-nav.navbar-right li a吗？或者你可以通过给每个a标签添加类来设置字体颜色。 - BuddhistBeast

做“a”起作用了。如果你把这个作为答案发布，我会授予你这个问题的奖励。 - Quinn McHugh

Answer 1

把它变成以下内容：

.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中也有演示。

- BuddhistBeast

---

有没有办法也让切换按钮变成蓝色？ - Sam

在Bootstrap 5.x中，这已经不再起作用。 - Matt

Answer 2

从Bootstrap 4开始，答案是在导航元素中简单地设置navbar-dark，它将把文本和链接设置为浅色主题。

<nav class="navbar navbar-dark">

- Leon

---

我不知道为什么这个评分不高。 - jon5477

Answer 3

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

对我有效。Bootstrap v4.3.1

- dynamiclynk

Answer 4

要更改导航栏中的文本颜色，您可以使用内联CSS，如下所示：

<a style="color: #3c6afc" href="#">

- ABDUL KHALIQ

---

由于某些原因，其他解决方案对我都没有起作用。只有这一个解决方案有效。谢谢。 - DineshKumar

Answer 5

您所链接的主题已经为您回答了这个问题。您需要将目标锁定在a元素本身上，例如：

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

如果那样不起作用，就需要更具体些。例如：

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

- ralph.m

Answer 6

只需在<nav>标签中添加navbar-dark类，如下所示。

<nav class="navbar navbar-inverse navbar-dark">

- mahmoud hamza

Answer 7

事实上，我们可以简单地使用标准的bootstrap文本颜色，而不是篡改CSS格式。

标准颜色示例：text-primary，text-secondary，text-success，text-danger，text-warning，text-info 在下面的导航栏代码示例中，文本Homepage将使用橙色 (text-warning)。

“最初的回答”

<a class="navbar-brand text-warning" href="/" > Homepage </a>

在下面的导航栏菜单示例中，文本菜单项将呈现蓝色（text-primary）。最初的回答。

<a class="dropdown-item text-primary" href="/my-link">Menu Item</a>

- Happy

Answer 8

尝试这个。

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

如果它不起作用，请尝试这个。

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

- Aditya Ponkshe

Answer 9

这段代码将会运行。

.navbar .navbar-nav > li .navbar-item ,
.navbar .navbar-brand{
                       color: red;
                      }

将以下CSS代码粘贴并运行，如果你有一个在<li>下面的元素，请将它定义为.navbar-item类。

例如：

<li>@Html.ActionLink("Login", "Login", "Home", new { area = "" },
 new { @class = "navbar-item" })</li>

或者

<li> <button class="navbar-item">hi</button></li>

- kushal

Answer 10

尝试在你的CSS中加入这段代码：

#ntext{
 color: #000000;
  }

然后在你所有导航栏列表代码中添加以下内容：

<li><a href="#" id="ntext"><span class="glyphicon glyphicon-user"></span> About</a></li>

- Shakela Tamuti