【发布时间】：2012-03-10 04:26:20
【问题描述】：
是否可以让侧边栏导航在流畅布局中始终固定在滚动条上？
【问题讨论】：
标签： css twitter-bootstrap css-position fluid-layout
【发布时间】：2012-03-10 04:26:20
【问题描述】：
注意： 有一个引导 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 继承宽度，因为它是固定的 i必须想出一个宽度。已经够近了。
如果您想在小屏幕/移动视图的网格下降之前保持侧边栏固定，这是另一种方法。
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;
}
}
【讨论】：
-
对于 Chrome 和 Firefox 上的我来说，那个小提琴总是有一个低于约 1,016 像素宽度的水平滚动条 (Chrome)。 （在这里更容易看到：jsfiddle.net/U8HGz/130/show 只是 /1，但在“Hello World；我不知道 /2 - /129 是什么”下方显示窗口宽度和高度。）
-
@T.J.Crowder 这是由于
margin-left:290px类上的margin-left:290px声明为侧边栏让路，如果它不存在，内容将与小屏幕上的侧边栏重叠。您可以通过在body标签上显式隐藏它来消除水平滚动条，如下所示：body { overflow-x: hidden; }。 -
谢谢。这可能适用于媒体查询或其他东西（所以它存在于 really 窄窗口上）；但到那时，可能还是想重新定位侧边栏。
-
@mauris 修复了我的演示，支持引导程序的响应功能。
-
@miguelcobain 这里是fixed version，虽然没有经过全面测试，但在我的测试环境下工作得很好。另一种解决方案是使用affix 引导插件，它为引导程序上的固定部分带来了本机支持......这个解决方案是在我们没有的时候编写的。
最新的 Boostrap (2.1.0) 具有专门针对此类应用程序的新 JS“附加”功能，仅供参考。
【讨论】：
-
@AlexanderRechsteiner 不是。 OP 特别提到了 Bootstrap 2.0。
这将搞砸响应式网页设计。 更好地将固定侧边栏包装在媒体查询中。
CSS
@media (min-width: 768px) {
.sb-fixed{
position: fixed;
}
}
HTML
<div class="span3 sb-fixed">
<div class="well sidebar-nav">
<!-- Sidebar Contents -->
</div>
</div>
现在侧边栏是固定的，如果视点大于 768px。
【讨论】：
如果没有 javascript，这是不可能的。我觉得 affix.js 太复杂了，所以我宁愿使用：
【讨论】：
我从 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”变量。
【讨论】：
很容易获得修复导航或您想要的所有标签。你只需要像这样写你的修复标签，然后把它放在你的正文部分
<div style="position: fixed">
test - try scroll again.
</div>
【讨论】：
在当前的 Bootstrap 版本 (3.3.2) 中，有一种很好的方法可以实现固定侧边栏进行导航。
此解决方案也适用于重新引入的 container-fluid 类，这意味着可以轻松实现响应式全屏布局。
通常您需要使用固定宽度和边距，否则导航会与内容重叠，但在空占位符列的帮助下，内容始终位于正确的位置。
当您将窗口大小调整为小于 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>
【讨论】：