创build一个固定的边栏和一个居中的Bootstrap 3网格
我想创build一个固定的侧边栏，存在于我的中心Bootstrap网格之外。 尝试这样做时面临的挑战是确定什么额外的样式应用/覆盖到我的.container以便它不重叠我的边栏时，屏幕的大小调整。
对于初学者，我只使用CSS框架的网格部分，因此.container ， .row和.col-md-12是从bootstrap.css文件本身拉取的代码，不是自定义的。 另外请记住，我正在使用Bootstrap 3 ，所以请不要在Bootstrap 2中提供stream畅的网格解决scheme，这在以前的线程中经常被问到。
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; }
正如drew_w所说 ，你可以在这里find一个很好的例子 。
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
