是否可以使侧边栏导航始终固定在流体布局中的滚动上?
注意: 有一个引导jQuery插件可以执行此操作,并且在写了此答案(大约两年前)后的几个版本中引入了更多功能,称为Affix。仅当您使用Bootstrap2.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; }
更新资料
修复了我的演示以支持响应式引导工作表,现在它具有引导程序的响应功能。
注意:此演示与顶部固定的导航栏一起流动,因此两个元素都将position:static在屏幕调整大小时出现,我在下面放置了另一个演示,该演示保持了固定的侧边栏,直到屏幕下降至移动视图为止。
position:static
.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的宽度,因此我不得不提出一个宽度。足够近了。
如果要保持侧边栏固定,直到网格下降以显示小屏幕/移动视图,这是另一种方法。
.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; } }