Css Bootstrap3：左侧固定导航

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

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

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

---

多谢各位

如果我理解正确，您希望将

.navigation

类放在一个新的div中，如下所示：

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

航行

---

并改变

位置：绝对至<代码>位置：固定.navigation

类中，我建议您移除外部

容器，并使用“row”，因为BS 3中不再有
row流体

在当前的引导版本（3.3.2）中，有一种很好的方法可以实现导航的固定侧栏

此解决方案也适用于重新引入的container fluid类，这意味着很容易实现响应性全屏幕布局

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

当您将窗口大小调整到小于768px并释放固定导航时，下面的设置将围绕内容展开

有关工作示例，请参见

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>







...
庞大的内容
...

请参阅中的答案。
谢谢，我现在已经解决了这个问题。我可以问你一个小问题吗：为什么我们在包装器中设置最小宽度，而不是在导航类中设置最小宽度？Bootstap“col xs-*”是完全流动的，因此它会不断缩小，最终与您的固定导航发生碰撞。。。因此，你必须使包装固定，以防止这种情况发生。我现在明白了，谢谢！如果您有时间，我提出了另一个类似的问题，关于内容区域的响应性：