Html 在居中的 Bootstrap 3 网格旁边创建一个固定的侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20557912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a fixed sidebar alongside a centered Bootstrap 3 grid
提问by Carl Edwards
I'd like to create a fixed sidebar that exists outsidemy centered Bootstrap Grid. The challenge I face when attempting to do this is determining what additional styles to apply/overwrite to my .containerso that it doesn't overlap my sidebar when the screen is resized.
我想创建一个固定的侧边栏，它存在于我居中的 Bootstrap 网格之外。我在尝试执行此操作时面临的挑战是确定要向我应用/覆盖哪些其他样式，.container以便在调整屏幕大小时它不会与我的侧边栏重叠。
For starters I'm only using the grid portion of the css framework so the .container, .rowand .col-md-12is code pulled from the bootstrap.cssfile itself and is not custom. Also keep in mind I'm using Bootstrap 3, so please, no suggestions for a fluid grid solution for Bootstrap 2 that is often asked about in previous threads.
对于初学者，我仅使用 css 框架的网格部分，因此.container,.row和.col-md-12是从bootstrap.css文件本身中提取的代码，而不是自定义的。还要记住，我正在使用Bootstrap 3，所以请不要为 Bootstrap 2 的流体网格解决方案提供建议，这在以前的线程中经常被问到。
HTML
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
CSS
html, body {
height: 100%;
width: 100%;
}
#left-nav {
background: #2b2b2b;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 250px;
}
回答by eggy
As drew_w said, you can find a good example here.
正如 draw_w 所说，您可以在这里找到一个很好的例子。
HTML
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
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;
}
}
