twitter-bootstrap 如何制作固定宽度的附加侧边栏导航（Bootstrap）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18645667/
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
How to make an Affixed sidebar navigation with fixed width (Bootstrap)
提问by user2752173
After several searches on the web, I can't find the solution for my needs. So maybe any of you can helpmeto find the good way to do it.
在网上搜索了几次后，我找不到满足我需求的解决方案。所以也许你们中的任何人都可以帮助我找到做到这一点的好方法。
Pretty much, I would like to use Bootstrap to make a template structure similar to this one: http://themes.mediacreed.com/html/synergy/#portfolio.html
差不多，我想用 Bootstrap 做一个类似于这个的模板结构：http: //themes.mediacreed.com/html/synergy/#portfolio.html
- 2 main parts : navigation and content wrapper
- the navigation need to be "affixed" on the left as a sidebar, and his width need to be fixed
- the content wrapper need to be adapted to the size of the window.
- 2 个主要部分：导航和内容包装器
- 导航需要“贴”在左边作为侧边栏，并且他的宽度需要固定
- 内容包装器需要适应窗口的大小。
Do you think that Bootstrap can do it? Cheers
你认为 Bootstrap 能做到吗？干杯
回答by user2752173
OK, after more search on the web, I've found this solution:
好的，经过在网上的更多搜索，我找到了这个解决方案：
HTML
HTML
<!-- Begin Side Nav -->
<div class="sideNav">
<h5>item</h5>
</div>
<!-- End Side Nav -->
<!-- Begin Main Content -->
<div class="content">
<!-- here the content........ -->
</div>
CSS
CSS
.content
{
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 100px;
right: 0px;
padding: 0px 10px;
overflow: auto;
}
.sideNav
{
padding: 10px 0;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
width: 100px; /* same as .content left */
background-color: #fff;
border-right: 1px solid #000;
z-index: 1020;
}
This code is inspired from http://jsfiddle.net/whoiskb/GqXdM/light/(but I've just keep the essential)
这段代码的灵感来自http://jsfiddle.net/whoiskb/GqXdM/light/（但我只保留了必要的部分）
Hope it can help
希望它可以帮助
回答by Zim
Here is another fixed sidebar option for the latest Bootstrap 3..
这是最新 Bootstrap 3 的另一个固定侧边栏选项。
Demo: http://www.bootstrapzero.com/bootstrap-template/basis
演示：http: //www.bootstrapzero.com/bootstrap-template/basis
