html - Boostrap 使用固定的导航栏和锚标签跳转到部分

Question

我正在尝试使用锚标签通过引导程序和固定在顶部的导航栏导航到网页的特定部分。问题是当我单击锚链接时，它们不能正确滚动到部分的开头，它会滚动到部分的开头，因为页边距应用于正文。

body {
    margin-top: 60px;
}

我怎样才能解决这个问题？

有关完整演示，请参阅以下 jsFiddle：http: //jsfiddle.net/6kwrY/

Answer 1

解决方案是使用：

.section {
    padding-top: 60px;
    margin-top: -60px;
}

Answer 2

通过填充为所有部分 p 添加边距，除非它们被称为“第一”。

body {
    margin-top: 60px;
}

section p {
    font-size: 30px;
    line-height: 1.5;
    margin-bottom: 35px;
    padding-top: 60px;
}

#first p {
        padding-top: 0px;
}