合并多个Bootstrap 3 navbar菜单 [英] Consolidate multiple Bootstrap 3 navbar menus on collapse
问题描述
我们将大型CMS的管理界面移至Bootstrap（3.x），以便在所有设备上提供更好的支持。它在桌面界面中有多个菜单，用于不同的目的。
We've moving our administrative interface for a large CMS over to Bootstrap (3.x) to provide better support across all devices. It has multiple menus in the desktop interface serving different purposes.
我已经能够折叠xs界面中的单个菜单，但是我很难包装我的头围绕着如何将其他人折叠到同一个移动菜单，或在同一个导航栏中的不同的菜单按钮，或如果有一个解决方案C，我甚至不知道。
I've been able to collapse a single menu in the xs interface, however I'm having a hard time wrapping my head around how to collapse the others either into the same mobile menu, or into a different menu button in the same navbar, or if there's a solution "C" that I don't even know about.
这是可能吗？
推荐答案
data-target属性接受一个CSS选择器崩溃了。这个CSS选择器也可以是一个类（所以不必是唯一的），并且可以应用于多个导航栏。
The data-target attribute accepts a CSS selector to apply the collapse to. This CSS selector can also be a class (so do not have to be unique) and can be applied on more than one navbar.
因此创建多个导航栏其内容包含在< div class =collapse navbar-collapse> 。
So create more than one navbar, all having their content wrapped inside <div class="collapse navbar-collapse">.
navbars应该有一个移动切换按钮， data-target =。navbar-collapse：
One of these navbars should have a mobile toggle button, with 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
另请参阅：
- Multiple navbars on the same page with Twitter's Bootstrap 3
- Bootstrap 3 multiple menus collapse into one for mobile
这篇关于合并多个Bootstrap 3 navbar菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
