Bootbar使用导航栏折叠导航菜单

我有一个非常简单的页面，导航栏位于顶部，导航栏位于页面的左侧。Bootbar使用导航栏折叠导航菜单

<div class="container"> 

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#top-links" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand mr-auto" href="#">Navbar</a> 
     <div class="collapse navbar-collapse" id="top-links" style="width:auto;"> 
      <div class="navbar-nav"> 
       <a class="nav-item nav-link" href="#">Help Guide</a> 
       <a class="nav-item nav-link" href="#">Company Name</a> 
       <a class="nav-item nav-link" href="#">Test User</a> 
      </div> 
     </div> 
    </nav> 

    <div class="row"> 
     <div class="col-2"> 
      <nav class="nav flex-column"> 
       <a class="nav-link" href="#">Dashboard</a> 
       <a class="nav-link" href="#">Users</a> 
       <a class="nav-link" href="#">Tasks</a> 
      </nav> 
     </div> 
     <div class="col"> 
      Content here... 
     </div> 
    </div> 
</div>

当前顶级导航栏在移动设备上正确折叠。我正在尝试使它成为我的导航页面左侧的页面也折叠到移动设备上的相同菜单中。所以当崩溃菜单将包含：

Dashboard 
Users 
Tasks 
------ 
Help Guide 
Company Name 
Test User

我可以简单地复制导航栏中的侧链接，只显示他们在sm设备上。但是我想知道是否有更好的方法来避免重复链接？

我正在使用Bootstrap 4 Alpha 6.

来源

2017-04-04 Joseph

一些花哨的JavaScript会诀窍。但更简单的解决方案是接受重复的链接。它将更加可维护。

来源

2017-04-04 16:26:52

另一种方法是使用BS4 flexbox实用程序类更改小宽度的顺序。两个菜单都使用nav而不是navbar。这种方法不需要额外的CSS或复制链接...

http://www.codeply.com/go/XS00CgPl7K

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 flex-first col-12"> 
      <a class="navbar-brand" href="#">Navbar</a> 
     </div> 
     <div class="col-md-6 col-3 d-flex flex-last flex-md-unordered"> 
      <div class="nav flex-md-row flex-column ml-md-auto" id="top-links"> 
       <a class="nav-item nav-link pl-0" href="#">Help Guide</a> 
       <a class="nav-item nav-link pl-0" href="#">Company Name</a> 
       <a class="nav-item nav-link pl-0" href="#">Test User</a> 
      </div> 
     </div> 
     <div class="col-9 flex-md-last"> 
      Content here... 
     </div> 
     <div class="col-3 flex-first flex-md-unordered"> 
      <nav class="nav flex-column"> 
       <a class="nav-item nav-link pl-0" href="#">Dashboard</a> 
       <a class="nav-item nav-link pl-0" href="#">Users</a> 
       <a class="nav-item nav-link pl-0" href="#">Tasks</a> 
      </nav> 
     </div> 
    </div> 
</div>

Demo

来源

2017-04-04 17:38:36 ZimSystem

Bootbar使用导航栏折叠导航菜单

回答

相关问题