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

【问题标题】：Increase padding if and only if section is at top of page当且仅当部分位于页面顶部时才增加填充
【发布时间】：2013-07-27 19:25:37
【问题描述】：

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

如果可能的话，我的目标是让在 sidenav 中点击的内容部分不会出现在页面的最顶部，而是出现在浏览器窗口顶部下方约 70 像素处。我可以轻松地将 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 在侧导航中单击时显示在顶部下方 70px 处？

【问题讨论】：

您使用的是什么版本的 Bootstrap？在 2.3 版本中，超大屏幕被称为 Hero's。但是导航列表（您的左侧导航部分）在 Bootstrap 3 中不存在。

标签： twitter-bootstrap sidebar nav affix

【解决方案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）没有使用他们发布的最佳代码，因此使用页面源作为示例并不总是有效。

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

【讨论】：

感谢 Matt H。这是一个老问题，与 Bootstrap 2.3 相关。 BS2.3 确实有 Hero 单位，但如果您在 BS2.3 文档上“查看源代码”，您会发现顶部使用的是“jumbotron”类。
进一步评论（之前已超时）：由于我现在已经转向 BS3 并且正在使用不同的设计，因此这个问题已经为我“解决”了。除非在接下来的几天内有来自 Matt H 或 user2603537 的反对，否则我会删除它。