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

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 link 到同一页面中的部分。每当单击 link 时，页面都会滚动到目标元素，但内容会被 navbar 重叠。具体来说，如果单击第一部分的 link (First)，页面将滚动到第一个 h3 元素，但该元素实际上呈现在 navbar 元素下方这怎么能解决？有关详细信息，请参阅 fiddle -- 降低结果面板的高度以更好地查看问题。

Answer 1

一个 CSS 唯一的解决方案是将 padding 添加到 h3 id 和一个否定的 margin 以删除多余的空格。例如：

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

See my JSFiddle here.

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

Force navbar to not overlap content on in-page navigation

html

css

twitter-bootstrap-3