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使用導航欄摺疊導航菜單

回答

相關問題