twitter-bootstrap 在引导程序中访问折叠导航菜单的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23886395/
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
Access the styles of collapsed nav menu in bootstrap
提问by user3442612
I want to change the style of the menu elements in Bootstrap 3's nav menu when the menu is in collapsed mode.
当菜单处于折叠模式时，我想更改 Bootstrap 3 导航菜单中菜单元素的样式。
For example:
例如：
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Is there a way to access the style properties of the "li > a" elements of the menu when it is different responsive states?
当菜单处于不同的响应状态时，有没有办法访问菜单的“li > a”元素的样式属性？
Thanks.
谢谢。
Edit: Some more clarity... So if you reduce the width of the screen and force the mobile menu to appear, the menu elements (nav buttons) have the same style. Let's say I wanted to have buttons with the default background (black here) in normal view, but give them a green background in mobile view, how do I do this?
编辑：更清晰一些......因此，如果您减小屏幕的宽度并强制显示移动菜单，则菜单元素（导航按钮）具有相同的样式。假设我想在普通视图中使用默认背景（此处为黑色）的按钮，但在移动视图中为它们提供绿色背景，我该怎么做？
回答by Nitish Dhar
You need to use CSS media queries for doing that. For twitter bootstrap 3, you can use the following media queries & write your CSS for specific view ports -
为此，您需要使用 CSS 媒体查询。对于 twitter bootstrap 3，您可以使用以下媒体查询并为特定视口编写 CSS -
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
Eg. If in Tablets you want some specific CSS, you will do something like this -
例如。如果在 Tablets 中你想要一些特定的 CSS，你会做这样的事情 -
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.navbar-collapse li a { background: green; }
}
回答by David
回答by AyB
For a jQuery way, the breakpoint of the collapse navbar seems to be at 768px, so you can do:
对于 jQuery 方式，折叠导航栏的断点似乎在 768px，因此您可以执行以下操作：
//this function is executed everytime the browser is re-sized,
//you could also call this function on document ready so that the default size
//when loading on mobile is checked
$(window).resize(function(){
if($(window).width()<768){
$('.navbar.navbar-inverse').css('background-color','green');
}
else
{
$('.navbar.navbar-inverse').css('background-color','#222');
}
});
DEMO(click the mobile icon)
演示（点击手机图标）
