twitter-bootstrap - 在 Bootstrap 中访问折叠导航菜单的样式

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”元素的样式属性？

谢谢。

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

Answer 1

为此，您需要使用 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; }
}