修复了stream体twitter引导2.0中的侧边栏导航
是否有可能使边栏导航保持始终固定在stream体布局的滚动？
注意：有一个引导jQuery插件可以做到这一点，而且在写了这个答案（几乎两年前）之后引入了几个版本，这个插件叫做Affix 。 只有在使用Bootstrap 2.0.4或更低版本时，此答案才适用。
是的，只需为您的侧边栏创build一个新的固定类，然后为您的内容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/
更新
修复了我的演示，以支持响应式引导表，现在它与引导程序的响应function一起stream动。
注意：这个演示stream动在顶部的固定导航栏，所以这两个元素的position:static在屏幕上resize，我放置了另一个演示下面，维护固定侧栏，直到屏幕下降移动视图。
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中inheritance宽度，因为它是固定的，我不得不拿出一个宽度。 这是足够接近。
如果您希望保持边栏不变，直到网格掉落为小屏幕/移动视图，则可以使用另一种方法。
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）有一个新的JS“附加”function，专门用于这种types的应用程序，FYI。
这将会使响应式网页devise变得糟糕。 在媒体查询中更好地包装固定边栏。
CSS
@media (min-width: 768px) { .sb-fixed{ position: fixed; } }
HTML
<div class="span3 sb-fixed"> <div class="well sidebar-nav"> <!-- Sidebar Contents --> </div> </div>
现在只有固定的侧边栏，如果视angular大于768px。
这是不可能的，没有JavaScript。 我发现affix.js太复杂，所以我宁愿使用：
stickyfloat
我从Andres的答案开始，最终得到一个像这样的粘性侧边栏：
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'variables。
很容易得到修复导航或所有你想要的标签。 所有你需要的是写这样的修复标签，并把它放在你的身体部分
<div style="position: fixed"> test - try scroll again. </div>
使用当前的Bootstrap版本（3.3.2），有一个很好的方法来实现导航的固定侧栏。
这个解决scheme也适用于重新引入的容器stream体类，这意味着很容易有一个响应式的全屏布局。
通常情况下，您需要使用固定的宽度和边距，否则导航会与内容重叠，但在空占位栏的帮助下，内容始终位于正确的位置。
当您将窗口大小调整为小于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>
