Question

我正在使用bootstrap来创建一个页面，其中包含一个jumbotron top，一个sidenav（附加到顶部）以及在sidenav中单击时上升到顶部的内容部分。功能上，它一切正常，但定位主要内容需要帮助。

如果可能的话，我的目标是让sidenav中单击的内容部分不会显示在页面的最顶部，而是显示在浏览器窗口顶部下方约70px处。我可以轻松地将70px添加到每个部分的顶部，但随后页面最终会在部分之间留下太多的空白区域。代码结构如下......

<body >
<!-- navigation header - fixed to top and transparent 
================================================== -->
    <!-- <header><ul><li><a></a><li><ul></header>-->


<!-- jumbotron 
================================================== -->

<div class="container">
    <div class="row-fluid" align="center">
        <div class="jumbotron span12">
             <!-- jumbotron content height: 800px -->
        </div>
    </div>



<!-- side nav 
================================================== -->
    <div class="row">
        <div class="span3" id="side-nav" data-spy="affix" data-offset-top="760">
            <ul class="nav nav-list">
                <li><a href="#section_1_name">section 1</a></li>
                <li><a href="#section_2_name">section 2</a></li>
                <li><a> <!-- links to additional sections --> </a></li>
            </ul>
        </div>


        <div class="span9 main-content">

        <!-- Sample section 1
        ================================================== -->
            <section id="section_1_name">
              <div class="page-header">
                <h1>header</h1>
              </div>

              <h3>Why you should do this</h3>
              <p>It's so amazing you'll want to do it.  It's so amazing you'll want to do it. It's so amazing you'll want to do it.</p>

              <h3>Specfic Instructions</h3>
              <p>lorem ispum ... </p>
            </section>

        <!-- Sample section 2
        ================================================== -->
            <section id="section_2_name">
              <div class="page-header">
                <h1>header</h1>
              </div>

              <h3>Why you should do this</h3>
              <p>It's so amazing you'll want to do it.  It's so amazing you'll want to do it. It's so amazing you'll want to do it.</p>

              <h3>Specfic Instructions</h3>
              <p>lorem ispum ... </p>
            </section>

        <!-- Additional sections
        ================================================== -->

        </div> <!-- end of row -->

    </div> <!-- end span9 --->
</body>

任何想法如何让每个X部分在sidenav中点击时显示在顶部以下70px？

Answer 1

如果您希望按下所有内容（包括侧导航），请将padding-top: 70px;添加到容器div中。

如果您不希望侧面导航与页面滚动一起移动，请添加“附加”类。 <ul class="nav nav-list affix">

在您的示例中，您还需要将#添加到您的href链接。 <li><a href="#section_1_name">section 1</a></li>

构建Bootstrap站点的方式（至少2.3）没有使用他们发布的最佳代码，因此使用页面源作为示例并不总是有效。

此外，导航的工作方式类似于页面中的锚点，它只是移动到该部分，所以当有更多内容时它看起来真的很好。如果内容不足，页面将不会“跳转”到该位置。此外，当有小部分和最后部分时，它看起来很奇怪。甚至引导网站都是这样做的。

当且仅当部分位于页面顶部时才增加填充

1 个答案: