Question

似乎无法弄清楚如何使用Bootstrap Affix功能。

一旦Affix将.affix类添加到导航栏，主内容块就会移动，从而覆盖导航栏。

HTML

<class="row-fluid">
    <div class="span4 bs-docs-sidebar" id="side-bar" data-spy="affix" data-offset-top="100">
        <ul class="nav nav-list bs-docs-sidenav">
            <li><a href="#1"><i class="icon-chevron-right"></i>  1</a></li>
            <li><a href="#2"><i class="icon-chevron-right"></i>  2</a></li>
            <li><a href="#3"><i class="icon-chevron-right"></i>  3</a></li>
            <li><a href="#4"><i class="icon-chevron-right"></i>  4</a></li>
            <li><a href="#5"><i class="icon-chevron-right"></i>  5</a></li>
        </ul>
    </div>
   <div class="span8" id="main-bar>
    ...
   </div>
</div>

CSS

.affix {
position: fixed; 
top: 20px; 
left: 0px;

}

Answer 1

以下是Bootstrap文档的摘录..

抬起头来！您必须管理固定元素的位置和其直接父母的行为。位置由词缀控制，词缀顶部和词缀底部。记得要检查一下当词缀删除内容时，折叠的父级会被删除页面的正常流程。

因此，在您的情况下，一旦包含侧边栏的span4上的.affix踢，就会从DOM的常规流程中删除。

解决这个问题的一种方法是使`UL成为词缀元素..

<ul class="nav nav-list"  data-spy="affix" data-offset-top="100">

http://jsfiddle.net/skelly/GUbgF/2/

当浏览器调整为较小的宽度时，您可能还必须使用@media查询来处理这种情况。

Answer 2

您将data-spy="affix" data-offset-top="100"提供给span4，您应该将其提交给ul.nav。

当你将词缀类赋予span4时，它会相对于视口产生位置。因此，span8或#main-bar不会将span4计为其兄弟，当span4的位置固定时，会导致导航后面。

您可以检查侧栏here并查看其实施方式。

查看更新的fiddle

Answer 3

如果我可以为这么老的帖子做出贡献。

我最近遇到过类似的问题。我将主要副本区域划分为：

col-sm-10和col-sm-2

突然，包含我的副本和图像的div会在词缀topnav后面滚动，但副本和图像本身会在词缀导航栏上方滚动。

使用上面的修补程序扭曲了我的布局，但经过一些研究后我发现了z-index。

所以我所做的就是在我的词缀顶部导航栏的保存容器中添加一个类，然后对它应用一个高z-index。

.topNavContainer {
    z-index:99999;
}

如果2个或更多个div相互叠加，

z-index将确定哪个div位于前面。 z-index越高，重叠另一个div时给予的优先级越高。

为什么主要内容会使用Affix转移到导航栏？

3 个答案: