0

我正在尝试修复我编写的这段代码。它可以工作但是当我向下滚动页面时根本不流畅！

<div class="container">
        <div data-spy="affix" data-offset-top="30">
            <div id="nav" class="navbar navbar-default" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Project name</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="index.html">Home</a></li>
                            <li class="active"><a href="grid_test.html">Grid Test</a></li>
                            <li><a href="jumbotron.html">Jumbotron</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div><!--/.container -->
            </div><!--/.navbar -->
        </div><!--/.data-spy-->

        <div class="page-header">
            <h1>Bootstrap grid test</h1>
            <p class="lead">Lo-fi ethical quinoa nesciunt. Esse fugiat sapiente fixie squid. Blog Etsy deserunt Brooklyn, meggings banh mi in post-ironic narwhal ad nihil Pinterest butcher nostrud. Cillum laborum pork belly authentic. Truffaut enim pop-up farm-to-table semiotics tattooed. Literally nisi duis, gluten-free Helvetica cornhole irony lo-fi. Et seitan literally paleo small batch cillum.</p>
        </div>

    </div>

除了 Bootstrap 使用的脚本之外，我没有使用任何类型的脚本

4

1 回答 1

1

好吧，从您的评论来看，问题在于通过分配.affixto .nav，该元素被分配了 a position:fixed;，从而将其从流程中删除。您需要通过在以下元素上添加额外的边距来解决该问题，以解决该问题。

.affix + div {
    margin-top:60px;
}
.affix + .page-header {
    margin-top:100px;
}

您可能需要对其进行调整以使其“完美”。

小提琴

于 2013-10-25T18:47:57.137 回答