Html 更改导航栏文本颜色 Bootstrap

Change navbar text color Bootstrap

提问by Quinn McHugh

I currently have this piece of html which represents the relevant part of my navbar:

我目前有这段 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>

And I have this piece of css which I was hoping to use to change the text color of the navbar:

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

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

The only problem is that the text color remains unchanged. I also saw that a very similar questionwent unsolved. I bet whoever can solve this one can solve the other too.

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

回答by BuddhistBeast

Make it the following:

使其如下：

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

The above will target the specific links, which is what you want, versus styling the entire list blue, which is what you were initially doing. Here is a JsFiddle.

以上将针对特定链接，这是您想要的，而不是将整个列表设置为蓝色，这是您最初所做的。这是一个JsFiddle。

The other way would be creating another class and implementing it like so:

另一种方法是创建另一个类并像这样实现它：

HTML

HTML

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

CSS

CSS

.color-me{
    color:blue;
}

Also demonstrated in this JsFiddle

也在这个JsFiddle 中演示

回答by Leon

As of bootstrap 4, the answer is to simply set navbar-dark in the nav element, which will set the text and links to a light theme .

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

<nav class="navbar navbar-dark">

回答by dynamiclynk

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

Worked for me. Bootstrap v4.3.1

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

回答by ralph.m

The thread you linked to does answer the question for you. You need to target the aelements themselves. E.g.

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

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

If that doesn't work, it just needs to be more specific. E.g.

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

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

回答by Aditya Ponkshe

Try this

尝试这个

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

If it doesn't work try this

如果它不起作用试试这个

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

回答by kushal

this code will work ,

此代码将工作，

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

paste in your css and run if you have a element below

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

define it as .navbar-item class

eg .

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

OR

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

将其定义为 .navbar-item 类

例如。

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

或者

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

回答by ABDUL KHALIQ

For changing the text color in navbar you can use inline css as;

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

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

回答by Sam

Thanks WChoward for your answer. I expanded:

感谢 Wchoward 的回答。我展开：

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

回答by Happy

In fact, we can simply use the standard bootstrap text colors, instead of hacking the CSS formats.

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

Standard Color examples: text-primary, text-secondary, text-success, text-danger, text-warning, text-info

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

In the Navbar code sample bellow, the text Homepagewould be in the orange color (text-warning).

在下面的导航栏代码示例中，文本Homepage将采用橙色 ( text-warning)。

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

In the Navbar menu item sample bellow, the text Menu Itemwould be in the blue color (text-primary).

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

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

回答by Marty

If you need to change the background colour of the navbar, you can do the following:

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

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

And to change the text:

并更改文本：

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