CSS 无法更改 Bootstrap 导航栏中的文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13437579/
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
Failing at changing the text color in Bootstrap navbar
提问by jfoutch
I've been trying to change the text color in a bootstrap template's navbar and have been unsuccessful. Anyone know where I'm going wrong? Here is my code.
我一直在尝试更改引导程序模板导航栏中的文本颜色，但没有成功。有谁知道我哪里出错了？这是我的代码。
<!--navbar-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="nav-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Restaurant</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"> </b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
<!--navbar-->
The CSS:
CSS：
.navbar-inner {
color: #FFF;
}
I also tried this:
我也试过这个：
#nav-inner {
color: #FFF;
}
回答by uday
If you want to change the css for the tabs you need to add color: #ddd;to the following
如果要更改选项卡的 css，则需要添加color: #ddd;到以下内容
.navbar .nav > li > a {
float: none;
line-height: 19px;
padding: 9px 10px 11px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ddd;
}
Hope it helps!!
希望能帮助到你！！
回答by maackle
My guess is that Bootstrap defines a more specific CSS rule that is winning out over your more general rule. You should examine the page with Firefox or Chrome's developer tools to see which styles are winning out over others. If your style doesn't even show up, then you know there's a more basic problem, but if Bootstrap's style is overriding your color, you have to give your style a higher precedence.
我的猜测是 Bootstrap 定义了一个更具体的 CSS 规则，它胜过你更通用的规则。您应该使用 Firefox 或 Chrome 的开发人员工具检查页面，以查看哪些样式优于其他样式。如果您的样式甚至没有出现，那么您就知道存在一个更基本的问题，但是如果 Bootstrap 的样式覆盖了您的颜色，则您必须给您的样式更高的优先级。
For a sanity check, try this overkill rule:
对于健全性检查，试试这个矫枉过正的规则：
html body .navbar .navbar-inner .container {
color: #FFF;
}
And if that works, then experiment with a lower level of specificity to see how specific you really need to get.
如果这有效，然后尝试使用较低级别的特异性，看看您真正需要获得的具体程度。
If all else fails, you can always do:
如果所有其他方法都失败了，您可以随时执行以下操作：
color: #FFF !important;
The CSS2 specificationlays this out in detail.
在CSS2规范规定了这一点的细节。
回答by Daniel Raja Singh
.navbar .nav > li > a {
float: none;
color: #5FC8D6;
background-color: #002E36;
}
.navbar .nav > li > a:hover {
float: none;
color: #002E36;
background-color: #5FC8D6;
}
回答by Chandra Shekhar
It works... try it out.......
它有效......试试看......
.navbar-nav > li > a:link
{
color:red;
}
回答by Buddha
nav.navbar-nav.navbar-right li a {
color: blue;
}
Works like a charm! Found it on another thread, so am not taking credit for it.
奇迹般有效！在另一个线程上找到它，所以我不相信它。
