CSS 修复了流畅的 twitter bootstrap 2.0 中的侧边栏导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9350818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed sidebar navigation in fluid twitter bootstrap 2.0
提问by sl_bug
Is it possible to make sidebar navigation stay always fixed on scroll in fluid layout?
是否可以使侧边栏导航始终固定在流体布局中的滚动上？
回答by Andres Ilich
Note:There is a bootstrap jQuery plugin that does this and so much more that was introduced a few versions after this answer was written (almost two years ago) called Affix. This answer only applies if you are using Bootstrap 2.0.4 or lower.
注意：有一个 bootstrap jQuery 插件可以执行此操作，并且在编写此答案（大约两年前）之后的几个版本中引入了更多名为Affix 的插件。此答案仅适用于使用 Bootstrap 2.0.4 或更低版本的情况。
Yes, simply create a new fixed class for your sidebar and add an offset class to your content div to make up for the left margin, like so:
是的，只需为侧边栏创建一个新的固定类，并在内容 div 中添加一个偏移类以弥补左边距，如下所示：
CSS
CSS
.sidebar-nav-fixed {
padding: 9px 0;
position:fixed;
left:20px;
top:60px;
width:250px;
}
.row-fluid > .span-fixed-sidebar {
margin-left: 290px;
}
Demo: http://jsfiddle.net/U8HGz/1/show/Edit here: http://jsfiddle.net/U8HGz/1/
演示：http: //jsfiddle.net/U8HGz/1/show/在这里编辑：http: //jsfiddle.net/U8HGz/1/
Update
更新
Fixed my demo to support the responsive bootstrap sheet, now it flows with the responsive feature of the bootstrap.
修复了我的演示以支持响应式引导程序表，现在它与引导程序的响应功能一起流动。
Note: This demo flows with the top fixed navbar, so both elements become position:staticupon screen resize, i placed another demo below that maintains the fixed sidebar until the screen drops for mobile view.
注意：这个演示与顶部固定导航栏一起流动，所以两个元素都会position:static在屏幕调整大小时发生，我在下面放置了另一个演示，它保持固定侧边栏，直到屏幕下降以进行移动视图。
CSS
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
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-->
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.
小注意：固定侧边栏的宽度大约有 10px/1% 的差异，这是因为它没有从 span3 容器 div 继承宽度，因为它是固定的，我不得不想出一个宽度。已经够近了。
And here is another method if you want to keep the sidebar fixed until the grid drops for small screen/mobile view.
如果您想保持侧边栏固定，直到小屏幕/移动视图的网格下降，这是另一种方法。
CSS
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;
}
}
回答by Joyrex
The latest Boostrap (2.1.0) has a new JS "affix" feature specifically for this type of application, FYI.
最新的 Boostrap (2.1.0) 有一个新的 JS“词缀”功能，专门针对此类应用程序，仅供参考。
回答by HaNdTriX
this will screw up the responsive Webdesign. Better wrap the fixed sidebar in a media query.
这将搞砸响应式网页设计。更好地将固定侧边栏包装在媒体查询中。
CSS
CSS
@media (min-width: 768px) {
.sb-fixed{
position: fixed;
}
}
HTML
HTML
<div class="span3 sb-fixed">
<div class="well sidebar-nav">
<!-- Sidebar Contents -->
</div>
</div>
Now the sidebar is only fixed, if the viewpot is bigger then 768px.
现在侧边栏只是固定的，如果视点大于 768 像素。
回答by Zuhaib Ali
This isn't possible without javascript. I find affix.js too complex, so I rather use:
没有 javascript，这是不可能的。我发现 afix.js 太复杂了，所以我宁愿使用：
回答by Christian.D
With the current Bootstrap version (3.3.2) there is a nice way to achieve a fixed sidebar for navigation.
在当前的 Bootstrap 版本 (3.3.2) 中，有一种很好的方法可以实现固定的侧边栏导航。
This solution also works well with the re-introduced container-fluid class, meaning it is easily possible to have a responsive full-screen layout.
此解决方案也适用于重新引入的 container-fluid 类，这意味着可以轻松实现响应式全屏布局。
Normally you would need to use fixed widths and margins or the navigation would overlap the content, but with the help of the empty placeholder column the content is always positioned in the right place.
通常您需要使用固定的宽度和边距，否则导航会与内容重叠，但在空占位符列的帮助下，内容始终位于正确的位置。
The below setup wraps the content around when you resize the window to less than 768px and releases the fixed navigation.
当您将窗口大小调整为小于 768 像素并释放固定导航时，以下设置会环绕内容。
See http://www.bootply.com/ePvnTy1VIIfor a working example.
有关工作示例，请参阅http://www.bootply.com/ePvnTy1VII。
CSS
CSS
@media (min-width: 767px) {
#navigation{
position: fixed;
}
}
HTML
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>
回答by mdashx
I started with Andres' answers and ended up getting a sticky sidebar like this:
我从安德烈斯的回答开始，最后得到了一个像这样的粘性侧边栏：
HTML:
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:
CSS：
.sidebar-nav-fixed {
position:fixed;
}
JS/jQuery:
JS/jQuery：
sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);
I'm assuming I also need JS to update the 'sidebarwidth' variable when the viewport is resized.
我假设在调整视口大小时，我还需要 JS 来更新“sidebarwidth”变量。
回答by verdier
Very easy to get fix nav or everything tag you want. All you need is to write your fix tag like this, and put it in your body section
很容易获得修复导航或您想要的所有标签。你只需要像这样写你的修复标签，然后把它放在你的正文部分
<div style="position: fixed">
test - try scroll again.
</div>
