更改导航栏文本颜色 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;
}

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

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中演示

Answer 2

从 bootstrap 4 开始，答案是简单地在 nav 元素中设置 navbar-dark ，这会将文本和链接设置为 light theme 。

<nav class="navbar navbar-dark">

Answer 3

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

为我工作。 引导程序 v4.3.1

Answer 4

要更改导航栏中的文本颜色，您可以使用内联 css as；

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

Answer 5

您链接到的线程确实为您回答了这个问题。 您需要定位a元素本身。 例如

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

如果这不起作用，它只需要更具体。 例如

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

Answer 6

尝试这个

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

如果它不起作用试试这个

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

Answer 7

此代码将起作用，

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

粘贴到您的 css 中并运行，如果您有下面的元素

将其定义为 .navbar-item 类

例如。

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

或者

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

Answer 8

事实上，我们可以简单地使用标准引导文本颜色，而不是破解 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>

在下面的导航栏菜单项示例中，文本Menu Item将为蓝色 ( text-primary )。

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

Answer 9

在你的 CSS 中试试这个：

#ntext{
 color: #000000;
  }

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

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

Answer 10

如果需要更改导航栏的背景颜色，可以执行以下操作：

<nav class="navbar navbar-expand-lg navbar-light" style="background-color=#e3f2fd">

并更改文本：

<a class="nav-link" href="#" style="color:#ccc">

Answer 11

感谢 Wchoward 的回答。 我展开：

.nav-link, .dropdown-item {
    color: blue !important;
}
.nav-link:hover, .dropdown-item:hover {
    color: darkgreen !important;
}

Answer 12

将一些内联 CSS 添加到锚标记

<li><a style = "color:blue" href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>

这应该将蓝色添加到锚标记文本。

Answer 13

简单就做

li a {
    color: blue;
}

Answer 14

只需像这样在<nav>标记中添加navbar-dark类

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

Answer 15

语法是：

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