有人可以解釋或顯示如何結合bootstrap 3摺疊頂級導航和offcanvas側導航？

我需要在一個頁面上放置兩個摺疊菜單。一個是固定頂部導航，在移動中摺疊，另一個是左側導航，摺疊到移動設備中的offcanvas（推送）菜單。在手機或平板電腦上會有兩個按鈕，一個用於頂部菜單，另一個用於側面導航。有人可以解釋或顯示如何結合bootstrap 3摺疊頂級導航和offcanvas側導航？

我沒有問題做一個或另一個，但我似乎無法結合這兩者。我認爲它是一種導航風格的衝突，但是現在我的頭轉過來了，我不知道該怎麼修復。

我已經採取了兩個代碼示例，並試圖將它們拼湊在一起，這是我正在使用的代碼。一旦我明白它是如何工作的，我會把它放到我的真實頁面中。

我已經把小提琴放在了一起https://jsfiddle.net/jhy1fp5t/但我不知道如何包括Bootstrap和Jasny Bootstrap包含所以它看起來不正確，但html和添加的CSS在那裏。

下面是HTML：

<!-- Fixed navbar --> 
<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Default</a></li> 
     <li><a href="#">Static top</a></li> 
     <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

<div class="container"> 


    <nav class="navbar navbar-default" role="navigation"> 
    <div class="navmenu navmenu-default navmenu-fixed-left offcanvas" id="sidenavigation"> 
    <a class="navmenu-brand" href="#">Menu</a> <ul class="nav navmenu-nav"><li>item</li><li>item</li><li>item</li></ul> 
</div> 
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body" data-target="#sidenavigation"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 
</nav> 

    <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12"> 
    <h1>Navbar example</h1> 
    <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
    <p>To see the difference between static and fixed top navbars, just scroll.</p> 

    </div> 

</div> <!-- /container -->

的最嚴重的問題是邊導航按鈕的行爲。現在，我已經神祕地移動到了右側，我已經添加了頂級導航。所以當offcanvas將頁面移到右側時它不可用。

讓我知道如果我可以提供其他任何東西。謝謝。

來源

2016-03-03 mike S