折叠时合并多个Bootstrap 3导航栏菜单

Question

我们将大型CMS的管理界面移至Bootstrap(3.x),以便为所有设备提供更好的支持.它在桌面界面中有多个菜单,用于不同的目的.

我已经能够在xs界面中折叠单个菜单,但是我很难绕过如何将其他菜单折叠到同一个移动菜单中,或者转移到同一个导航栏中的不同菜单按钮,或者如果有一个我甚至都不知道的解决方案"C".

这甚至可能吗？

Answer 1

data-target属性接受CSS选择器以应用折叠.此CSS选择器也可以是一个类(因此不必是唯一的),并且可以应用于多个导航栏.

因此,创建多个导航栏,所有导航栏都包含在内<div class="collapse navbar-collapse">.

其中一个导航栏应该有一个移动切换按钮,其中包括data-target=".navbar-collapse":

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" 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="#">Brand</a>
</div>

演示:http://www.bootply.com/BaiuoZqIrk

另见:

• Twitter的Bootstrap 3在同一页面上有多个导航栏
• Bootstrap 3多个菜单合并为一个用于移动设备