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 下拉菜单文本颜色的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 3下拉菜单在子菜单焦点上更改背景

如何使 Bootstrap 单选按钮继续进入下拉菜单

如何进行活动菜单文本颜色更改导航下拉项子菜单? [复制]

使用 Google 表格下拉菜单更改单元格背景颜色而不是文本

UI Bootstrap 下拉菜单在 Firefox 中无法使用 / Text Angular ...

Excel中设置下拉菜单并填充不同颜色