更改导航栏文本颜色 Bootstrap答案

【问题标题】：Change navbar text color Bootstrap更改导航栏文本颜色 Bootstrap
【发布时间】：2014-08-16 16:33:36
【问题描述】：

我目前有这段 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 没有解决。我敢打赌，谁能解决这个问题，谁也能解决另一个问题。

【问题讨论】：

您可能还必须以 li 为目标。你试过.nav.navbar-nav.navbar-right li a 吗？或者你可以通过给每个人一个类来为每个人设置一个带有字体颜色的标签。
执行“a”有效。如果您将此作为答案发布，我将奖励您这个问题。

标签： html css twitter-bootstrap colors

【解决方案1】：

简单就做

li a {
    color: blue;
}

【讨论】：

欢迎来到 StackOverflow。虽然此代码可以回答问题，但提供有关如何和/或 为什么 解决问题的附加上下文将提高答案的长期价值。此外，请解释为什么您的答案比其他人更可取。

【解决方案2】：

在锚标签中添加一些内联css

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

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

【讨论】：

【解决方案3】：

感谢 Wchoward 的回答。我展开了：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

由于某种原因，其他解决方案都不适合我。只有这一个做到了。谢谢

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

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

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

并更改文本：

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

【讨论】：

OP 要求提供链接的文本颜色，而不是背景颜色

【解决方案9】：

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

<nav class="navbar navbar-dark">

【讨论】：

不知道为什么评分不高。

【解决方案10】：

语法是：

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

【讨论】：

【解决方案11】：

在你的 CSS 中试试这个：

#ntext{
 color: #000000;
  }

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

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

【讨论】：

【解决方案12】：

如下：

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

【讨论】：

有什么办法让切换按钮也变成蓝色吗？
这在 bootstrap 5.x 中不再有效

【解决方案13】：

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

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

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

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

【讨论】：

【解决方案14】：

试试这个

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

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

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

【讨论】：