0

我正在使用 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 的任何想法？

4

1 回答 1

0

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

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

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

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

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

于 2013-11-27T18:29:34.980 回答