Question

我在Bootstrap 3中有两个菜单 - 社交菜单和主菜单。在移动设备上折叠时，我会打开两个菜单打开/切换按钮来打开相应的菜单项。

折叠后有没有办法，我可以将社交菜单项移动到主菜单中，只使用一个切换/菜单按钮和列表？代码低于......

<div id="social-menu" class="navbar navbar-default navbar-static-top" role="navigation">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-social">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
      </div>
      <div class="collapse navbar-collapse navbar-menubuilder">
         <ul class="nav navbar-nav navbar-social">
            <li>Social Menu Item 1</li>
            <li>Social Menu Item 2</li>
            <li>Social Menu Item 3</li>
            <li>Social Menu Item 4</li>
         </ul>
      </div>
   </div>
</div>


<div id="main-menu" class="navbar navbar-default navbar-static-top" role="navigation">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-menu">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
      </div>
      <div class="collapse navbar-collapse navbar-menubuilder">
         <ul class="nav navbar-nav navbar-main-menu">
            <li>Main Menu Item 1</li>
            <li>Main Menu Item 2</li>
            <li>Main Menu Item 3</li>
            <li>Main Menu Item 4</li>
         </ul>
      </div>
   </div>
</div>

使用Bootstrap 3

Answer 1

将第二个导航栏复制到与主导航栏相同的列表中。然后将类添加到主导航栏以将其隐藏在大型桌面上。

<div id="main-menu" class="navbar navbar-default navbar-static-top" role="navigation">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-menu">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
      </div>
      <div class="collapse navbar-collapse navbar-menubuilder">
         <ul class="nav navbar-nav navbar-social">
            <li>Main Menu Item 1</li>
            <li>Main Menu Item 2</li>
            <li>Main Menu Item 3</li>
            <li>Main Menu Item 4</li>
            <li class="hidden-md hidden-lg">Social Menu Item 1</li>
            <li class="hidden-md hidden-lg">Social Menu Item 2</li>
            <li class="hidden-md hidden-lg">Social Menu Item 3</li>
            <li class="hidden-md hidden-lg">Social Menu Item 4</li>
         </ul>
      </div>
   </div>
</div>

移动设备上有两个导航栏崩溃为1个？

1 个答案: