CSS bootstrap 3 导航栏下拉框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19911183/
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 3 navbar dropdown box color
提问by Jamie Collingwood
I am using flat UI theme with bootstrap 3. The flat UI theme navbar is not working correctly and many are having similar issues with it that have posted on github. So I decided to just use the default BS3 navbar and write my own code (with the help of another stackoverflow thread) to style the menu the way I would like. I am doing this in LESS as an override css.
我正在使用带有引导程序 3 的平面 UI 主题。平面 UI 主题导航栏无法正常工作，许多人都遇到了类似的问题，这些问题已发布在 github 上。所以我决定只使用默认的 BS3 导航栏并编写我自己的代码（在另一个 stackoverflow 线程的帮助下）以我想要的方式设置菜单样式。我在 LESS 中这样做作为覆盖 css。
The problem is I can't figure out how to change the following.
问题是我不知道如何更改以下内容。
- drop down box color
- the drop down box link color
- drop down box link hover color
- 下拉框颜色
- 下拉框链接颜色
- 下拉框链接悬停颜色
Here is the css I am using:
这是我正在使用的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;
}
This produces the correct color bar, bar link, carets, and bar hover effects. But when I click a button with a sub menu, the sub menu still appears in the default BS gray. What classes am I missing to change the drop down sub menu background color, link color, etc?
这会产生正确的颜色条、条链接、插入符号和条悬停效果。但是当我单击带有子菜单的按钮时，子菜单仍然以默认的 BS 灰色显示。我缺少哪些类来更改下拉子菜单背景颜色、链接颜色等？
Thanks
谢谢
回答by Zim
This is the CSS to change the dropdown menu style/color..
这是更改下拉菜单样式/颜色的 CSS ..
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
Demo: http://bootply.com/93475
回答by Justin
I would also add this:
我还要补充一点：
.navbar-default .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
In addition to what Skelly said in his response:
除了斯凯利在他的回应中所说的：
.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
This is because the latter only changes the background-color when the dropdown is open, but once reverted back, the background-color changes back to the default. You can't witness this by just toggling the dropdown, but if you were to delay the transition of the dropdown, for example by using jQuery below to hover, you can see what I mean.
这是因为后者仅在下拉菜单打开时更改背景颜色，但一旦恢复，背景颜色将更改回默认值。您无法通过切换下拉菜单来见证这一点，但是如果您要延迟下拉菜单的转换，例如通过使用下面的 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');
});
});
jsFiddlewith the above CSS You can compare the toggle dropdown with the hover one. They both work.
jsFiddle与上述 CSS 您可以将切换下拉菜单与悬停下拉菜单进行比较。他们都工作。
jsFiddlewithout the above CSS. The toggle dropdown seems to work, but once you hover and move your mouse away, it'll revert back.
没有上述 CSS 的jsFiddle。切换下拉菜单似乎有效，但是一旦您将鼠标悬停并将鼠标移开，它就会恢复原状。
回答by rom99
If you're using FireFox or Chrome, can you use their developer tools to check what CSS is being applied to the dropdown box?
如果您使用的是 FireFox 或 Chrome，您能否使用他们的开发人员工具检查下拉框应用了哪些 CSS？
For example, what I would do in Chrome is to right-click on the dropdown box background and select "Inspect element". Then check you have the right element selected. Then you should be able to check which CSS styles are applied to that element in the panel to the right side (it has tabs for Styles, Computed, Event Listeners, DOM Breakpoints and Properties in my version of Chrome 30.0.1599.101 m)
例如，我在 Chrome 中会做的是右键单击下拉框背景并选择“检查元素”。然后检查您是否选择了正确的元素。然后，您应该能够在右侧面板中检查哪些 CSS 样式应用于该元素（在我的 Chrome 30.0.1599.101 m 版本中，它具有样式、计算、事件侦听器、DOM 断点和属性的选项卡）
回答by Jamie Collingwood
I used a BS3 menu generator to create the css code I needed. Was much easier than trying to hunt down the tags I needed to change.
我使用 BS3 菜单生成器来创建我需要的 css 代码。比试图寻找我需要更改的标签容易得多。
