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

唯一的问题是文字颜色保持不变。我还看到一个非常similar question未解决。我打赌谁能解决这个问题也可以解决另一个问题。

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，这将设置文本并链接到灯光主题。

<nav class="navbar navbar-dark">

Answer 3

试试这个

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

如果它不起作用，试试这个

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

Answer 4

您链接的主题确实为您回答了问题。您需要自己定位a元素。例如。

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

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

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

Answer 5

此代码将起作用，

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

粘贴到CSS中并运行如果您在

下有一个元素，请将其定义为.navbar-item class

例如。

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

OR

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

Answer 6

要更改导航栏中的文本颜色，可以将内联css用作;

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

Answer 7

在你的css中试试这个：

#ntext{
 color: #000000;
  }

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

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

Answer 8

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

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

并更改文本：

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

Answer 9

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

为我工作。 Bootstrap v4.3.1

Answer 10

实际上，我们可以简单地使用标准引导文本颜色，而不用破解CSS格式。

标准颜色示例：text-primary，text-secondary，text-success，text-danger，text-warning，text-info

在下面的Navbar代码示例中，文本Homepage将为橙色（text-warning）。

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

在Navbar菜单项示例波纹管中，文本Menu Item将为蓝色（text-primary）。

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

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-nav .navbar-right > li > a {
   color: blue;
}

更改导航栏文本颜色Bootstrap

14 个答案: