CSS Bootstrap3：左侧固定导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19836607/
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
Bootstrap3: fixed nav on the left
提问by FrancescoMussi
I am setting up a site with bootstrap 3 and the idea is to have a column on the left reserved for the navigation and on the right the content of the site:
我正在使用引导程序 3 设置一个站点，其想法是在左侧保留一列用于导航，在右侧保留站点的内容：
The position of the nav should be fixed and without margin on the left and on the top. I have tryied with position:fixed and position:absolute but the problem is that the content of the site override the navbar.
导航的位置应该是固定的，并且在左侧和顶部没有边距。我尝试过 position:fixed 和 position:absolute 但问题是网站的内容覆盖了导航栏。
How can i make properly a fixed navbar on the left? How can i avoid that the content of the site override the navbar?
如何在左侧正确制作固定导航栏？如何避免网站内容覆盖导航栏？
Thank you very much!
非常感谢！
采纳答案by Zim
I would suggest you remove the outer container, and use 'row' since there is no longer row-fluidin BS 3.
我建议您删除外部container，并使用“行”，因为row-fluidBS 3 中不再存在。
回答by hippojamba
If I understand right you want to place the .navigationclass in a new div like this:
如果我理解正确，您想将.navigation课程放在这样的新 div 中：
<div class="col-xs-4 col-md-2">
<div class="navigation">
<h1>Navigation</h1>
</div>
</div> <!-- /col-md-2 navigation -->
And change position: absolute;to position: fixed;in your .navigationclass
并在您的班级中更改position: absolute;为position: fixed;.navigation
回答by Christian.D
With the current Bootstrap version (3.3.2) there is a nice way to achieve a fixed sidebar for navigation.
在当前的 Bootstrap 版本 (3.3.2) 中，有一种很好的方法可以实现固定的侧边栏导航。
This solution also works well with the re-introduced container-fluid class, meaning it is easily possible to have a responsive full-screen layout.
此解决方案也适用于重新引入的 container-fluid 类，这意味着可以轻松实现响应式全屏布局。
Normally you would need to use fixed widths and margins or the navigation would overlap the content, but with the help of the empty placeholder column the content is always positioned in the right place.
通常您需要使用固定的宽度和边距，否则导航会与内容重叠，但在空占位符列的帮助下，内容始终位于正确的位置。
The below setup wraps the content around when you resize the window to less than 768px and releases the fixed navigation.
当您将窗口大小调整为小于 768 像素并释放固定导航时，以下设置会环绕内容。
See http://www.bootply.com/ePvnTy1VIIfor a working example.
有关工作示例，请参阅http://www.bootply.com/ePvnTy1VII。
CSS
CSS
@media (min-width: 767px) {
#navigation{
position: fixed;
}
}
HTML
HTML
<div class="container-fluid">
<div class="row">
<div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 1</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
<!-- Placeholder - keep empty -->
</div>
<div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
...
Huge Content
...
</div>
</div>
</div>
See my answer in https://stackoverflow.com/a/28238515/3891027.
