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

Question

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

body {
    padding-top: 80px;
}

一切正常，但是，当我尝试使用 anchor 导航时，没有填充了，我的 div 被部分隐藏了。

您可以在这个 JSFiddle 上找到示例。 http://jsfiddle.net/TUy7C/

如何解决这个问题？

Answer 1

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

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

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