引導側面導航欄

Question

我想和站點佈局，如：http://www.hellomichael.com/?section=about

我無法獲得導航欄留在頁面的100％，也無法獲得列表項不遵循我滾動（我可以使用固定的位置，但我必須使用特定的高度）。

HTML：

<div class="row"> 
    <div class="col-sm-3"> 
    <div class="sidebar-nav"> 
     <div class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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> 
      <span class="visible-xs navbar-brand">Sidebar menu</span> 
     </div> 
     <div class="navbar-collapse collapse sidebar-navbar-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Music</a></li> 
      <li><a href="#">Gallery</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-9"> 
    <h2 style="height: 2000px;">CONTENT GOES HERE</h2> 
    </div> 
</div> 

CSS：

@media (min-width: 768px) { 


.sidebar-nav .navbar .navbar-collapse { 
    padding: 0; 
    max-height: none; 
    } 

    .sidebar-nav .navbar ul { 
    float: none; 
    } 

    .sidebar-nav .navbar ul:not { 
    display: block; 
    } 

    .sidebar-nav .navbar li { 
    float: none; 
    display: block; 
    } 

    .sidebar-nav .navbar li a { 
    padding-top: 12px; 
    padding-bottom: 12px; 
    } 

    .sidebar-nav { 
    max-width: 200px; 
    z-index: 10000; 
    } 

    .navbar { 
    border-radius: 0 !important; 
    } 

    .navbar-default { 
    margin: 0 !important; 
    height: 100vh; 
    /*min-height: 100%;*/ 
    } 

/* .sidebar-navbar-collapse { 
    position: fixed; 
    height: 100%; 
    top: 0; 
    left: 0; 
    }*/ 
} 

有什麼建議？

Answer 1

你不是太遙遠。

您只需對.sidebar-nav課程進行一些更改即可。

.sidebar-nav { 
    width: 200px; /*Changed from max-width: 200px to better fit smaller menu items, but this is up to your preference*/ 
    z-index: 10000; 
    position: fixed; /*Keeps the menu from scolling with the page*/ 
    min-height: 100%; /*Makes it fit 100% of your pages content*/ 
} 

JSFiddle Demo Here