bootstrap 3 导航栏下拉框颜色

Posted 2023-03-06

【中文标题】bootstrap 3 导航栏下拉框颜色

【英文标题】：bootstrap 3 navbar dropdown box color

【发布时间】：2013-11-23 12:57:21

【问题描述】：

我正在使用带有 bootstrap 3 的平面 UI 主题。平面 UI 主题导航栏无法正常工作，许多人都遇到了类似的问题，这些问题已发布在 github 上。所以我决定只使用默认的 BS3 导航栏并编写我自己的代码（在另一个 *** 线程的帮助下）以我想要的方式设置菜单样式。我在LESS中这样做是为了覆盖css。

问题是我不知道如何更改以下内容。

下拉框颜色 下拉框链接颜色 下拉框链接悬停颜色

这是我正在使用的 css：

/* navbar */
.navbar-default 
   font-size: floor(@component-font-size-base * 1.067); // ~16px
   border-radius: @border-radius-large;
   border: none;
   background-color: @brand-primary !important;

/* title */
.navbar-default .navbar-brand 
    color: #5E5E5E;

/* link */
.navbar-default .navbar-nav > li > a 
    color: @clouds;

.navbar-default .navbar-nav > li > a:hover 
    color: @clouds;

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus 
    color: @clouds;
    background-color: @brand-secondary;  // Changes color of main button that is currently active.

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus 
    color: @clouds;
    background-color: @brand-secondary;  //  Changes color of main menu button once clicked.

/* caret */
.navbar-default .navbar-nav > li > a .caret 
    border-top-color: @clouds;
    border-bottom-color: @clouds;
    color: @clouds;

.navbar-default .navbar-nav > li > a:hover .caret 
    border-top-color: #333;
    border-bottom-color: #333;

.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret 
    border-top-color: #555;
    border-bottom-color: #555;

这会产生正确的颜色条、条链接、插入符号和条悬停效果。但是当我单击带有子菜单的按钮时，子菜单仍以默认的 BS 灰色显示。我缺少哪些类来更改下拉子菜单背景颜色、链接颜色等？

谢谢

【参考方案1】：

如果您使用的是 FireFox 或 Chrome，您是否可以使用他们的开发人员工具来检查下拉框应用了哪些 CSS？

例如，我在 Chrome 中所做的是右键单击下拉框背景并选择“检查元素”。然后检查您是否选择了正确的元素。然后您应该能够在右侧面板中检查哪些 CSS 样式应用于该元素（在我的 Chrome 30.0.1599.101 m 版本中，它具有样式、计算、事件侦听器、DOM 断点和属性选项卡）

【讨论】：

我确实使用了 chrome 开发工具，但仍然无法弄清楚子菜单悬停颜色的来源。

【参考方案2】：

我使用 BS3 菜单生成器来创建我需要的 css 代码。比寻找我需要更改的标签要容易得多。

【参考方案3】：

这是更改下拉菜单样式/颜色的 CSS..

  .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu 
    background-color: #3344ff;
    color:#ffffff;
  

演示：http://bootply.com/93475

【参考方案4】：

我还要补充一下：

.navbar-default .dropdown-menu 
     background-color: #3344ff;
     color:#ffffff;

除了 Skelly 在回复中所说的话：

.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu 
    background-color: #3344ff;
    color:#ffffff;

这是因为后者仅在下拉菜单打开时更改背景颜色，但一旦恢复，背景颜色就会恢复为默认值。你不能仅仅通过切换下拉菜单来见证这一点，但如果你要延迟下拉菜单的转换，例如通过使用下面的 jQuery 悬停，你可以明白我的意思。

$(document).ready(function () 
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () 
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    , function () 
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    );
);

jsFiddle 与上面的 CSS 您可以将切换下拉菜单与悬停下拉菜单进行比较。它们都有效。

jsFiddle 没有上面的 CSS。 切换下拉菜单似乎有效，但是一旦您将鼠标悬停并移开鼠标，它就会恢复。