固定侧边栏导航在流体twitter bootstrap 2.0 [英] Fixed sidebar navigation in fluid twitter bootstrap 2.0

问题描述

是否可以让侧栏导航始终固定在滚动的流畅布局？

Is it possible to make sidebar navigation stay always fixed on scroll in fluid layout?

推荐答案

/ strong>有一个引导jQuery插件，这样做，这么多的，在这个答案被写了（几乎两年前）之后，介绍了几个版本，称为 Affix 。此回答仅适用于您使用Bootstrap 2.0.4或更低版本。

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.

是的，只需创建一个新的固定类您的边栏，并为内容div添加偏移类以弥补左边距，例如：

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:

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/

更新：

修复了我的演示以支持响应式引导表，现在它与引导的响应功能一起流动。

Fixed my demo to support the responsive bootstrap sheet, now it flows with the responsive feature of the bootstrap.

注意： navbar，所以两个元素变成 position：static 在屏幕调整大小，我放置另一个演示下面维护固定边栏，直到屏幕移动视图。

Note: This demo flows with the top fixed navbar, so both elements become position:static upon screen resize, i placed another demo below that maintains the fixed sidebar until the screen drops for mobile view.

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

演示，请编辑此处。

^{minor note：在固定边栏的宽度上有大约10px / 1％的差异，这是因为它不会继承span3容器div的宽度，因为它是固定的与宽度。}

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

演示，请编辑此处。

这篇关于固定侧边栏导航在流体twitter bootstrap 2.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！