Question

我正在设置一个带有bootstrap 3的网站，其想法是在左边有一列保留用于导航，右边是网站内容：

导航的位置应固定，左侧和顶部没有边距。我已尝试过position：fixed和position：absolute但问题是网站的内容覆盖了导航栏。

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

非常感谢！

Answer 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

Answer 2

我建议您删除外部container，并使用＆＃39; row＆＃39;因为BS 3中不再有row-fluid。

http://bootply.com/92472

Answer 3

使用当前的Bootstrap版本（3.3.2），有一种很好的方法可以实现固定的侧边栏导航。

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

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

当您将窗口大小调整为小于768px并释放固定导航时，下面的设置将包装内容。

有关工作示例，请参阅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中查看我的回答。

Bootstrap3：左侧固定导航

3 个答案: