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

Posted 2023-03-06

【中文标题】在折叠时合并多个 Bootstrap 3 导航栏菜单

【英文标题】：Consolidate multiple Bootstrap 3 navbar menus on collapse

【发布时间】：2014-09-11 02:58:14

【问题描述】：

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

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

这可能吗？

【问题讨论】：

我也一直在寻找一种“好”的方法来做到这一点。我过去所做的是为桌面创建了 2 个菜单，然后在小型设备上创建了一个进一步的移动菜单（这是一个完全不同的菜单，但两者兼而有之），但我知道这不是最有效的做事方式.

【参考方案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

另见：

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