折叠时合并多个 Bootstrap 3 导航栏菜单 [英] Consolidate multiple Bootstrap 3 navbar menus on collapse

问题描述

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

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

这甚至可能吗?

解决方案

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

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

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

<!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Brand</a>

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

另见:

• 同一页面上的多个导航栏Twitter 的 Bootstrap 3
• Bootstrap 3 多个菜单合并为一个手机版

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.

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.

Is this even possible?

解决方案

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.

So create more than one navbar, all having their content wrapped inside <div class="collapse 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>

demo: http://www.bootply.com/BaiuoZqIrk

Also see:

• Multiple navbars on the same page with Twitter's Bootstrap 3
• Bootstrap 3 multiple menus collapse into one for mobile

这篇关于折叠时合并多个 Bootstrap 3 导航栏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！