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

我们将大型CMS的管理界面移至Bootstrap（3.x），以便为所有设备提供更好的支持。它在桌面界面中有多个菜单，用于不同的目的。合并多个Bootstrap 3导航栏菜单折叠

我已经能够折叠xs界面中的单个菜单，但是我很难将我的头部折叠到如何将其他折叠到相同的移动菜单中，或者折叠到不同的菜单按钮中相同的导航栏，或者如果有解决方案“C”，我甚至不知道。

这甚至可能吗？

来源

2014-07-20 oucil

我也一直在寻找一种“好”的方式来做到这一点。我过去所做的是为桌面创建2个菜单，然后在小设备上显示另一个移动菜单（这是一个完全不同的菜单，但是两者合并），但我知道这并不是通过最有效的方式来完成任务。 – Stuart

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

另见：

来源

2014-11-11 08:29:25

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

回答

相关问题