在引导程序中访问折叠导航菜单的样式

Question

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

谢谢.

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

Answer 1

您需要使用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) {

}

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

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