CSS Bootstrap 下拉菜单文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22074956/
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 dropdown menu text color
提问by MaylorTaylor
So i'm working with Twitter's Bootstrap for the first time and I'm trying to change the color of the text inside the dropdown menus once they have collapsed. (if that makes sense)
所以我第一次使用 Twitter 的 Bootstrap，我试图在下拉菜单折叠后更改它们内文本的颜色。（如果这是有道理的）
I used this site(<<<--- link to CSS i am using) to help with some CSS but i can't seem to find the right code block that changes the color of the correct text.
我使用这个站点（<<<--- 我正在使用的 CSS 链接）来帮助处理一些 CSS，但我似乎无法找到正确的代码块来更改正确文本的颜色。
When you compress the webpage so it shows the collapse menu and go to the Dropdown list, you will see that the blue background transfers over to the dropdown menu items, but the font-color is black making it very hard to read. I want this font to be white.
当您压缩网页以显示折叠菜单并转到下拉列表时，您会看到蓝色背景转移到下拉菜单项，但字体颜色为黑色，因此很难阅读。我希望这个字体是白色的。
<nav class="navbar navbar-custom" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ATR Notary</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="~/Order/Index" class="dropdown-toggle"
data-toggle="dropdown">Orders <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="~/Order/Index">View Orders</a></li>
<li><a href="~/Order/Create">Add Order</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="~/Notary/Index" class="dropdown-toggle"
data-toggle="dropdown">Notaries <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="~/Notary/Index">View Notaries</a></li>
<li><a href="~/Notary/Create">Add Notary</a></li>
</ul>
</li>
</ul>
@Html.Partial("_LoginPartial")
</div><!-- /.navbar-collapse -->
</nav>
回答by Zim
You should be able to use this CSS..
你应该能够使用这个 CSS ..
/*-- change navbar dropdown color --*/
.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
回答by Rajan471
Apply simple css and you are done
应用简单的 css 就完成了
See this example:
看这个例子：
.navbar{height:70px; padding-top:20px; }
will change height and padding of navbar - that is outter container
将改变导航栏的高度和填充 - 即外部容器
.dropdown-menu{background:rgba(0,0,0,0.5); color:white; }
will change background color of dropdown-menu - that is ulunder dropdown link.
All we have to understand the structure of navbar.
将更改下拉菜单的背景颜色 - 即ul在下拉链接下。所有我们必须了解导航栏的结构。
.dropdown-menu li>a{color:white; }
.dropdown-menu>li{padding:5px; border-bottom:1px solid white;border-left:1px
solid white;border-right:1px solid white }
.dropdown-menu li>a:hover{background:white; }
回答by wla312
previous answer is saying the same thing pretty much, but their syntax and commenting was a little confusing for me, so possibly it confused others too... you're first calling out the 'dropdown-menu' class, then the 'li' html element within that class, then, the 'a' html element nested within the 'li' element, so CSS looks like this:
以前的答案几乎都在说同样的事情，但他们的语法和评论对我来说有点混乱，所以可能它也让其他人感到困惑......你首先调用了“下拉菜单”类，然后是“li” html 元素在该类中，然后，'a' html 元素嵌套在 'li' 元素中，所以 CSS 看起来像这样：
.dropdown-menu li a {
color: white;
}
