0

我是 Bootstrap 的新手，目前有以下设置：

    <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                  ...
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  ...
                </div>
            </div>
        </nav>
    </div>

    <div class="jumbotron">
        <div class="container">
            ...
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <ul class="nav nav-pills nav-stacked" role="tablist">
                    ...
                </ul>
            </div>
            <div class="col-md-8">
                <div class="tab-content">
                    ...
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="container text-center">
            Hello
        </div>
    </div>

我想使用affix或类似的东西让用户像往常一样滚动，但导航栏、jumbotron 和侧面的导航药丸列表都应该保持固定。所以本质上唯一会滚动的是药丸右侧的内容。我尝试affix自己这样做，但不确定要设置什么偏移量，因此无法达到预期的结果。我将不胜感激朝着正确的方向前进！

4

1 回答 1

0

我认为出于您的目的，最好只担心侧导航的附加，并为您的 Jumbotron 使用 CSS 定位（就像 Bootstrap 为顶部的导航栏所做的那样）。

对于jumbotron，将位置设置为固定并给它一个明确的顶部（50px 是其上方导航栏的高度），如果您希望它在视口中伸展，则将宽度设置为 100%，并给它一个明确的高度。然后将 z-index 设置为大于 1 且小于 1030 的值（Bootstrap 赋予导航栏的 z-index）。这将确保您的内容在 jumbotron 后面滚动。

超大屏幕的 CSS：

.jumbotron{
    position: fixed;
    top:50px;
    width: 100%;
    height: 200px;
    z-index: 10;
}

然后创建你的容器并给它一个边距顶部(navbar height) + (jumbotron height) + (any desired margin)，在我们的例子中这是 250px + 30px 边距。这将确保您的页面位于固定导航和超大屏幕下方。

#container-id{
    margin-top:280px;
}

对于side-nav，在您的ul元素中包含data-spy="affix". 您不需要设置任何值，data-offset-top因为您希望侧导航立即固定到位。

这是一个带有示例导航栏和 sidenav 的 jsfiddle 以及您每日服用的 lorem ipsum：http: //jsfiddle.net/3LLZR/

于 2014-08-05T22:03:55.813 回答