bootstrap fluid affix

Bootstrap的主页上的左边菜单是可以固定的。当页面宽度缩小，也能够滚动。

然而例子里的fluid布局里菜单不是固定的

如果简单的加上affix会发现菜单固定了，但是页面宽度缩小时不能滚动了。

看bt会有个额外的css处理这个问题。原理上说就是用了@media。在页面宽度小时取消了position:fixed属性。

http://stackoverflow.com/questions/9350818/fixed-sidebar-navigation-in-fluid-twitter-bootstrap-2-0

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-->

Demo, edit here.

^{minor note: there is about a 10px/1% difference on the width of the fixed sidebar, its due to the fact that since it doesn't inherit the width from the span3 container div because it is fixed i had to come up with a width. It's close enough.}

And here is another method if you want to keep the sidebar fixed until the grid drops for small screen/mobile view.

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;
    }
}

Demo, edit here.