修复了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>