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.