当菜单处于折叠模式时，我想更改Bootstrap 3导航菜单中菜单元素的样式。
例如：
<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>
当响应状态不同时，是否可以访问菜单的“ li> a”元素的样式属性？
谢谢。
编辑：更多清晰度...因此，如果减小屏幕的宽度并强制显示移动菜单，则菜单元素（导航按钮）具有相同的样式。假设我希望在普通视图中具有默认背景（此处为黑色）的按钮，但在移动视图中为它们提供绿色背景，我该怎么做？
您需要使用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) {
}
例如。如果在Tablets中需要一些特定的CSS，则可以执行以下操作-
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.navbar-collapse li a { background: green; }
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句