当菜单处于折叠模式时，我想更改 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”元素的样式属性？

谢谢。

编辑:更清晰一些...因此，如果您减小屏幕宽度并强制显示移动菜单，则菜单元素(导航按钮)具有相同的样式。假设我想在普通 View 中使用默认背景(此处为黑色)的按钮，但在移动 View 中为它们提供绿色背景，我该怎么做？

请您参考如下方法:

为此，您需要使用 CSS 媒体查询。对于 twitter bootstrap 3，您可以使用以下媒体查询并为特定视口(viewport)编写 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) { 
 
} 

例如。如果在平板电脑中你想要一些特定的 CSS，你会做这样的事情 -

/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) { 
       .navbar-collapse li a { background: green; } 
}