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

感谢。

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

Answer 1

您需要使用CSS媒体查询来执行此操作。对于twitter bootstrap 3，您可以使用以下媒体查询＆amp;为特定的视图端口编写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。如果在平板电脑中你想要一些特定的CSS，你会做这样的事情 -

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

Answer 2

使用3.3.5，我注意到导航栏目标在折叠时还有一个类。我可以像这样设计我折叠的项目：

.navbar.in ul li {
    /* style goes here */
}

DEMO（点击移动图标）

Answer 3

对于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 （点击移动图标）

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

3 个答案: