0

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

http://jsfiddle.net/GUbgF/1/

一旦 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;

}

4

3 回答 3

3

这是 Bootstrap 文档的摘录。

小心！您必须管理固定元素的位置及其直接父元素的行为。位置由 affix、affix-top 和 affix-bottom 控制。当词缀从页面的正常流程中删除内容时，请记住检查可能折叠的父级。

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

解决此问题的一种方法是使 `UL 成为词缀元素。

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

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

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

于 2013-06-05T17:08:34.470 回答
0

你正在给data-spy="affix" data-offset-top="100"，span4你应该给它ul.nav。

当您将词缀类赋予 时span4，它会相对于视口定位。因此，span8or#main-bar不计入span4其兄弟，当位置固定时span4，它会导致在导航后面。

您可以在此处检查侧边栏，看看它是如何实现的。

查看更新的小提琴

于 2013-06-05T17:09:13.597 回答
0

如果我可以为这样一个旧职位做出贡献。

我最近遇到了类似的问题。我将我的主要复制区域划分为：

col-sm-10 和 col-sm-2

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

使用上述修复扭曲了我的布局，但经过更多研究后，我发现了 z-index。

所以我所做的就是在我的 affix-top navbar 的容器中添加一个类，然后对其应用一个高 z-index。

.topNavContainer {
    z-index:99999;
}

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

于 2016-02-22T23:21:36.320 回答