我正在使用引导程序 3 设置一个站点,想法是在左侧保留一列用于导航,在右侧保留站点内容:
http://jsbin.com/iQIKUli/3
导航的位置应该是固定的,左侧和顶部没有边距。我已经尝试了位置:固定和位置:绝对,但问题是网站的内容覆盖了导航栏。
如何在左侧正确制作固定导航栏?如何避免网站内容覆盖导航栏?
谢谢!
我建议您删除外部container
,并使用"row",因为BS 3中不再row-fluid
。
http://bootply.com/92472
理解正确,您想将.navigation
类放在一个新的div中,如下所示:
<div class="col-xs-4 col-md-2">
<div class="navigation">
<h1>Navigation</h1>
</div>
</div> <!-- /col-md-2 navigation -->
并将position: absolute;
更改为.navigation
类中的position: fixed;
使用当前的 Bootstrap 版本 (3.3.2),有一种很好的方法可以实现用于导航的固定侧边栏。
此解决方案也适用于重新引入的容器流体类,这意味着可以轻松实现响应式全屏布局。
通常,您需要使用固定的宽度和边距,否则导航会与内容重叠,但是借助空占位符列,内容始终位于正确的位置。
当您将窗口大小调整为小于 768 像素并释放固定导航时,以下设置将环绕内容。
有关工作示例,请参见 http://www.bootply.com/ePvnTy1VII。
.CSS
@media (min-width: 767px) {
#navigation{
position: fixed;
}
}
.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>
请参阅我在 https://stackoverflow.com/a/28238515/3891027 中的答案。