Question

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

我已经能够在xs界面中折叠单个菜单，但是我很难绕过如何将其他菜单折叠到同一个移动菜单中，或者变成一个不同的菜单同一导航栏中的菜单按钮，或者是否有解决方案＆＃34; C＆＃34;我甚至都不知道。

这甚至可能吗？

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

另见：

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

1 个答案: