在中心Bootstrap 3网格旁边创建固定侧边栏

我想创建一个固定的侧边栏,它存在于我的中心Bootstrap网格之外.我在尝试这样做时面临的挑战是确定应用/覆盖我的其他样式,.container以便在调整屏幕大小时它不会与我的侧边栏重叠.

对于初学者来说我只使用了CSS框架的栅格部,因此.container,.row并.col-md-12从拉代码bootstrap.css文件本身并不是定制.另外请记住我正在使用Bootstrap 3,所以请不要为以前的线程中经常被问到的Bootstrap 2的流体网格解决方案提出建议.

HTML

   

      

         
Lorem ipsum dolor sit amet, nunc dictum at.
      
   

CSS

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

eggy.. 111

正如drew_w所说,你可以在这里找到一个很好的例子.

HTML

    

        

            
Home
            
Another link
            
Next link
            
Last link
        
    
    

        

            

                

                    

                        
                    
                
            
        
    

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