修复了流畅的twitter bootstrap 2.0中的侧边栏导航

Question

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

Answer 1

注意:有一个bootstrap 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;
    }
}

演示,在这里编辑.

Answer 2

最新的Boostrap(2.1.0)具有一个新的JS"词缀"功能,专门用于此类应用程序,FYI.

Answer 3

这将搞砸响应式Webdesign.更好地将固定边栏包装在媒体查询中.

CSS

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

HTML

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

现在侧边栏只是固定的,如果viewpot大于768px.