Question

我是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和nav-pill列表都应该保持固定。因此，实质上唯一可以滚动的是药片右侧的内容。我尝试用affix自己做这个，但不确定设置偏移的内容因此无法达到预期的结果。我很感激能朝着正确的方向前进！

Answer 1

我认为为了您的目的，最好只担心侧导航的词缀，并为您的Jumbotron使用CSS定位（就像Bootstrap在顶部的导航栏一样））。

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

jumbotron的CSS：

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

然后创建你的容器并给它一个（导航栏高度）+（jumbotron height）+（任何所需的边距）的边距顶部，在我们的例子中，这是250px + 30px边距。这将确保您的页面位于固定导航和jumbotron下方。

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

对于侧面导航，在 ul 元素中包含data-spy="affix"。您不需要为data-offset-top设置任何值，因为您希望立即修复侧导航。

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

Twitter引导程序将滚动限制为一个div

1 个答案: