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链接到同一页面中的部分。无论何时单击链接，页面都会滚动到目标元素，但内容会被navbar重叠。具体来说，如果单击第一部分的链接（First），页面将滚动到第一个h3元素，但该元素实际呈现在navbar元素下如何固定？有关详细信息，请参阅fiddle - 降低结果面板的高度以更好地查看问题。

Answer 1

仅限CSS的解决方案是将padding添加到h3 id，将负margin添加到#first, #second { padding-top: 200px; margin-top: -200px; }以删除冗余空白。例如：

{{1}}

<强> See my JSFiddle here.

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

1 个答案: