修复了流畅的 twitter bootstrap 2.0 中的侧边栏导航 [英] Fixed sidebar navigation in fluid twitter bootstrap 2.0

问题描述

是否可以使侧边栏导航始终固定在流体布局中的滚动上?

解决方案

注意: 有一个引导 jQuery 插件可以执行此操作，并且在编写此答案后的几个版本中引入了更多插件(大约两年前)称为 Affix.此答案仅适用于使用 Bootstrap 2.0.4 或更低版本的情况.

<小时>

是的，只需为您的侧边栏创建一个新的固定类，并向您的内容 div 添加一个偏移类以弥补左边距，如下所示:

CSS

.sidebar-nav-fixed {填充:9px 0;位置:固定；左:20px；顶部:60px；宽度:250px；}.row-fluid >.span-fixed-sidebar {左边距:290px；}

演示:http://jsfiddle.net/U8HGz/1/show/在此处http://jsfiddle.net/U8HGz/1/

更新

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

注意:这个演示与顶部固定导航栏一起流动，所以两个元素在屏幕调整大小时都变成 position:static，我在下面放置了另一个演示，它保持固定侧边栏，直到屏幕下降以进行移动视图.

CSS

.sidebar-nav-fixed {位置:固定；顶部:60px；宽度:21.97%；}@media(最大宽度:767px){.sidebar-nav-fixed {宽度:自动；}}@media(最大宽度:979px){.sidebar-nav-fixed {位置:静态；宽度:自动；}}

HTML

<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 的宽度，因为它是固定的不得不想出一个宽度.够近了.}

如果您想保持侧边栏固定，直到小屏幕/移动视图的网格下降，这是另一种方法.

CSS

.sidebar-nav-fixed {位置:固定；顶部:60px；宽度:21.97%；}@media(最大宽度:767px){.sidebar-nav-fixed {位置:静态；宽度:自动；}}@media(最大宽度:979px){.sidebar-nav-fixed {顶部:70px；}}

演示，编辑这里.

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

解决方案

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.

---

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

Demo: http://jsfiddle.net/U8HGz/1/show/ Edit here: 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: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-->

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.

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