11

我正在使用带有 bootstrap 3 的平面 UI 主题。平面 UI 主题导航栏无法正常工作，许多人都遇到了类似的问题，这些问题已发布在 github 上。所以我决定只使用默认的 BS3 导航栏并编写我自己的代码（在另一个 stackoverflow 线程的帮助下）以我想要的方式设置菜单样式。我在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 灰色显示。我缺少哪些类来更改下拉子菜单背景颜色、链接颜色等？

Bootstrap 导航栏子菜单

谢谢

4

4 回答 4

16

这是用于更改下拉菜单样式/颜色的 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

于 2013-11-11T17:41:43.760 回答
4

我还要补充一点：

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

除了斯凯利在回复中所说的话：

.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 您可以将切换下拉菜单与悬停下拉菜单进行比较。他们都工作。

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

于 2014-09-05T10:02:14.657 回答
2

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

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

于 2013-11-11T16:36:12.647 回答
0

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

于 2013-11-11T17:18:11.850 回答