Bootstrap 下拉菜单文本颜色
Posted
技术标签:
【中文标题】Bootstrap 下拉菜单文本颜色【英文标题】:Bootstrap dropdown menu text color 【发布时间】:2014-03-31 06:18:03 【问题描述】:所以我是第一次使用 Twitter 的 Bootstrap,我试图在下拉菜单折叠后更改它们的颜色。 (如果有道理的话)
我使用this site(
当您压缩网页以显示折叠菜单并转到下拉列表时,您会看到蓝色背景转移到下拉菜单项,但字体颜色为黑色,因此很难阅读。我希望这个字体是白色的。
<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>
【问题讨论】:
您能否发布指向该网站的链接或您的 CSS 和 HTML 的副本? 嗯,我正在使用的 css 是从我在第二段中链接到的页面中提取的。我将使用 HTML 编辑 OP 【参考方案1】:你应该可以使用这个 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;
演示:http://www.bootply.com/113750
【讨论】:
这行得通,我所要做的就是将其更改为.navbar-custom
用于我的特定 css
here 是另一个对我有用的,悬停时的多选下拉菜单是here
此外,如果您使用悬停下拉菜单,请删除“.open”类,它会正常工作。【参考方案2】:
应用简单的 css 就完成了
看这个例子:
.navbarheight:70px; padding-top:20px;
将改变导航栏的高度和填充 - 即外部容器
.dropdown-menubackground:rgba(0,0,0,0.5); color:white;
将改变下拉菜单的背景颜色 - 即下拉链接下的ul
。
navbar的结构我们要搞清楚。
.dropdown-menu li>acolor:white;
.dropdown-menu>lipadding:5px; border-bottom:1px solid white;border-left:1px
solid white;border-right:1px solid white
.dropdown-menu li>a:hoverbackground:white;
【讨论】:
【参考方案3】:以前的答案几乎是在说同样的事情,但他们的语法和评论让我有点困惑,所以可能它也让其他人感到困惑...... 您首先调用 'dropdown-menu' 类,然后调用该类中的 'li' html 元素,然后是嵌套在 'li' 元素中的 'a' html 元素,因此 CSS 如下所示:
.dropdown-menu li a
color: white;
【讨论】:
以上是关于Bootstrap 下拉菜单文本颜色的主要内容,如果未能解决你的问题,请参考以下文章
使用 Google 表格下拉菜单更改单元格背景颜色而不是文本