6

我正在使用 bootstrap 3 建立一个站点,其想法是在左侧保留一列用于导航,在右侧保留站点内容:

http://jsbin.com/iQIKUli/3

导航的位置应该是固定的,并且在左侧和顶部没有边距。我尝试过使用 position:fixed 和 position:absolute 但问题是网站的内容会覆盖导航栏。

如何在左侧正确制作固定导航栏?如何避免网站内容覆盖导航栏?

非常感谢!

4

3 回答 3

1

使用当前的 Bootstrap 版本(3.3.2),有一种很好的方法可以实现固定的侧边栏进行导航。

此解决方案也适用于重新引入的 container-fluid 类,这意味着可以轻松实现响应式全屏布局。

通常您需要使用固定的宽度和边距,否则导航会与内容重叠,但在空占位符列的帮助下,内容始终位于正确的位置。

当您将窗口大小调整为小于 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中查看我的答案。

于 2015-01-30T15:00:10.543 回答
1

我建议您删除外部,并使用“行”,因为BS 3 中container不再存在。row-fluid

http://bootply.com/92472

于 2013-11-07T14:48:29.177 回答
1

如果我理解正确,您想将.navigation课程放在一个新的 div 中,如下所示:

<div class="col-xs-4 col-md-2">
     <div class="navigation">
          <h1>Navigation</h1>
     </div>
</div> <!-- /col-md-2 navigation -->

并更改position: absolute;position: fixed;在您的.navigation班级

于 2013-11-07T13:58:56.303 回答