在居中的Bootstrap 3網格旁邊創建一個固定的側邊欄

Question

我想創建一個固定的側邊欄，其存在我的居中Bootstrap網格。嘗試執行此操作時遇到的挑戰是確定要將其他樣式應用/覆蓋到我的.container，以便在屏幕調整大小時不會與我的側邊欄重疊。

對於我只使用了CSS框架的柵格部首發所以.container，.row和.col-md-12代碼是從bootstrap.css文件本身拉動，而不是定製的。另外請記住，我正在使用Bootstrap 3，所以請不要在Bootstrap 2的流體網格解決方案中提出建議，這在以前的線程中經常會被問到。

HTML

<div id="left-nav"></div> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <p>Lorem ipsum dolor sit amet, nunc dictum at.</p> 
     </div> 
    </div> 
</div> 

CSS

html, body { 
    height: 100%; 
    width: 100%; 
} 
#left-nav { 
    background: #2b2b2b; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 250px; 
} 

Answer 1

As drew_w said，你可以找到一個good example here。

HTML

<div id="wrapper"> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class="sidebar-brand"><a href="#">Home</a></li> 
      <li><a href="#">Another link</a></li> 
      <li><a href="#">Next link</a></li> 
      <li><a href="#">Last link</a></li> 
     </ul> 
    </div> 
    <div id="page-content-wrapper"> 
     <div class="page-content"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <!-- content of page --> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#wrapper { 
    padding-left: 250px; 
    transition: all 0.4s ease 0s; 
} 

#sidebar-wrapper { 
    margin-left: -250px; 
    left: 250px; 
    width: 250px; 
    background: #CCC; 
    position: fixed; 
    height: 100%; 
    overflow-y: auto; 
    z-index: 1000; 
    transition: all 0.4s ease 0s; 
} 

#page-content-wrapper { 
    width: 100%; 
} 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

@media (max-width:767px) { 

    #wrapper { 
     padding-left: 0; 
    } 

    #sidebar-wrapper { 
     left: 0; 
    } 

    #wrapper.active { 
     position: relative; 
     left: 250px; 
    } 

    #wrapper.active #sidebar-wrapper { 
     left: 250px; 
     width: 250px; 
     transition: all 0.4s ease 0s; 
    } 

} 

JSFIDDLE