修复了流畅的Twitter Bootstrap 2.0中的侧边栏导航

是否可以使侧边栏导航始终固定在流体布局中的滚动上？

注意：有一个引导jQuery插件可以做到这一点，在编写此答案（大约两年前）后的几个版本中引入了更多功能，称为Affix。仅当您使用Bootstrap 2.0.4或更低版本时，此答案才适用。

是的，只需为边栏创建一个新的固定类，然后向内容div添加一个偏移量类，以弥补左边距，如下所示：

的CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

演示：http : //jsfiddle.net/U8HGz/1/show/ 在此处编辑：http : //jsfiddle.net/U8HGz/1/

更新资料

修复了我的演示以支持响应式引导工作表，现在它具有引导程序的响应功能。

注意：此演示与顶部固定的导航栏一起流动，因此两个元素都随position:static屏幕大小而变，我在下面放置了另一个演示，该演示保持了侧边栏的固定，直到屏幕移至移动视图为止。

的CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

的HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

演示，在这里编辑。

^{小提示：固定侧边栏的宽度大约有10px / 1％的差异，这是由于以下事实：由于它不是固定的，因此不继承自span3容器div的宽度，因此我不得不提出一个宽度。足够近了。}

这是另一种方法，如果您想保持侧边栏固定，直到网格变小以显示小屏幕/移动视图。

的CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

演示，在这里编辑。

最新的Boostrap（2.1.0）具有专门用于此类应用程序FYI的新JS“附加”功能。

这会搞砸响应式Web设计。最好将固定的侧边栏包装在媒体查询中。

的CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

的HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

现在，只有视口大于768像素时，边栏才被固定。

没有javascript，这是不可能的。我发现affix.js太复杂了，所以我宁愿使用：

黏浮

我从安德烈斯的答案开始，最终得到了一个像这样的粘性侧边栏：

HTML：

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS：

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery：

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

我假设在调整视口大小时，我还需要JS更新“ sidebarwidth”变量。

非常容易获得修复的导航或您想要的所有标签。您需要做的就是这样编写fix标签，并将其放在body部分中

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

在当前的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>