html - 强制导航栏不与页内导航内容重叠

Question

我有一个带有 navbar 和一些内容的简单网页。

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a id="about" href="#first">First section</a></li>
        <li><a id="about" href="#second">Second section</a></li>
    </ul>
</div>

<div class="container body-content">
    <div class="row">
        <div class="col-md-12">
            <img alt="this should be my image" />
            <h3 id="first">The first section</h3>
            <p>... content ...</p>
            <h3 id="second">The second section</h3>
            <p>... content ...</p>
        </div>
    </div>
</div>

导航栏 链接到同一页面中的部分。每当单击链接时，页面都会滚动到目标元素，但内容会被 navbar 覆盖。具体来说，如果单击指向第一部分的链接 (First)，页面将滚动到第一个 h3 元素，但该元素实际上呈现在 navbar 下 元素 如何解决这个问题？参见 fiddle有关详细信息——降低结果面板的高度以更好地查看问题。

Answer 1

仅 CSS 的解决方案是将 padding 添加到 h3 id 和负的 margin 以删除多余的空格。例如:

#first, #second {
    padding-top: 200px;
    margin-top: -200px;
}

See my JSFiddle here.