Question

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

Answer 1

注意：有一个bootstrap 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-->

Demo，修改here。

^{次要注意：固定侧边栏的宽度大约有10px / 1％的差异，这是因为它不会继承span3容器div的宽度，因为它是固定的不得不想出一个宽度。它足够接近。}

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

<强> 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，修改here。

Answer 2

最新的Boostrap（2.1.0）有一个新的JS“词缀”功能，专门用于此类应用程序，仅供参考。

Answer 3

这将搞砸响应式网页设计。更好地将固定边栏包装在媒体查询中。

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

Answer 4

如果没有javascript，这是不可能的。我发现affix.js太复杂了，所以我宁愿使用：

stickyfloat

Answer 5

我从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'变量。

Answer 6

很容易获得修复导航或您想要的所有标记。您只需要编写这样的修复标记，并将其放在您的正文部分

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

Answer 7

使用当前的Bootstrap版本（3.3.2），有一种很好的方法可以实现固定的侧边栏导航。

此解决方案也适用于重新引入的容器 - 流体类，这意味着可以轻松实现响应式全屏布局。

通常您需要使用固定宽度和边距，否则导航会与内容重叠，但在空占位符列的帮助下，内容始终位于正确的位置。

当您将窗口大小调整为小于768px并释放固定导航时，下面的设置将包装内容。

有关工作示例，请参阅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>

修复了流畅的twitter bootstrap 2.0中的侧边栏导航

7 个答案: