html - Bootstrap 侧导航栏

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