Html Bootstrap 更改导航栏链接颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48735679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Change Navbar Link Colors
提问by Mason SB
I know this topic has been beaten to death, but what I have read isn't working. I'm simply trying to change the links in my bootstrap navbar to the color white. I know I have the CSS on it because I can change the font-size, but not the color.
我知道这个话题已经被打死了，但我读到的东西不起作用。我只是想将引导程序导航栏中的链接更改为白色。我知道我有 CSS，因为我可以更改字体大小，但不能更改颜色。
nav .navbar-nav li{
color: white !important;
font-size: 25px;
}
<nav class="navbar navbar-expand-lg navbar-light fixed-top sticky-top">
<%= link_to root_path, class: 'navbar-brand' do %>
<span class="fa fa-home" aria-hidden="true"> Bartlett Containers LLC</span> <% end %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<%=link_to 'Pricing', pricing_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%=link_to 'FAQ', faq_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%=link_to 'Contact', contact_path, class: 'nav-link' %>
</li>
</ul>
</div>
</nav>
回答by ztadic91
set the coloron the aelement inside the li.
color在 内的a元素上设置li。
nav .navbar-nav li a{
color: white !important;
}
回答by WebDevBooster
The !importantflag is meant for quick testing only. Using it as a permanent solution tends to cause problems later and thus should be avoided.
该!important标志仅用于快速测试。将其用作永久解决方案往往会在以后引起问题，因此应避免使用。
The best practice for overriding css is simply to ensure that the specificity of your custom css rule either matches or exceeds the specificity of the corresponding Bootstrap rule. And of course, the custom css must be loaded after Bootstrap css.
覆盖 css 的最佳做法是确保自定义 css 规则的特异性匹配或超过相应 Bootstrap 规则的特异性。当然，自定义 css 必须在 Bootstrap css 之后加载。
So, in this particular case you could use a rule that looks like this:
因此，在这种特殊情况下，您可以使用如下所示的规则：
.navbar-light .navbar-nav .nav-link {
color: red;
}
More info about CSS specificity:
有关 CSS 特异性的更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
