修复了流体推特引导程序 2.0 中的侧边栏导航

Posted 2023-03-06

【中文标题】修复了流体推特引导程序 2.0 中的侧边栏导航

【英文标题】：Fixed sidebar navigation in fluid twitter bootstrap 2.0

【发布时间】：2012-03-10 04:26:20

【问题描述】：

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

【参考方案1】：

注意： 有一个引导 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 继承宽度，因为它是固定的 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;
    

Demo，编辑here。

【讨论】：

对于 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 引导插件，它为引导程序上的固定部分带来了本机支持......这个解决方案是在我们没有的时候编写的。

【参考方案2】：

最新的 Boostrap (2.1.0) 具有专门针对此类应用程序的新 JS“附加”功能，仅供参考。

【讨论】：

@AlexanderRechsteiner 不是。 OP 特别提到了 Bootstrap 2.0。

【参考方案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。

【参考方案4】：

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

stickyfloat

【参考方案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”变量。

【参考方案6】：

很容易获得修复导航或您想要的所有标签。你只需要像这样写你的修复标签，然后把它放在你的正文部分

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

【参考方案7】：

在当前的 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>