css - 使用锚链接时菜单栏隐藏 div

Question

我使用 Bootstrap，顶部有一个固定的菜单栏。为了正确显示 div，我在身体上添加了一个 padding-top。

body {
    padding-top: 80px;
}

一切都很好，但是当我尝试使用锚点导航时，不再有填充，并且我的 div 部分隐藏了。

你可以在这个 JSFiddle 上找到一个例子。 http://jsfiddle.net/TUy7C/

如何解决这个问题？

Answer 1

您可以将填充应用于每个部分而不是正文，然后添加负底部边距以缩小部分之间的间隙：

http://jsfiddle.net/TUy7C/2/

#home, #about, #contact {
    padding-top: 80px;
    margin-bottom: -80px;
}