Bootstrap 使用固定的导航栏和锚标签跳转到部分 [重复]答案

【问题标题】：Boostrap using fixed navbar and anchor tags to jump to sections [duplicate]Bootstrap 使用固定的导航栏和锚标签跳转到部分 [重复]
【发布时间】：2025-12-16 18:05:02
【问题描述】：

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

body {
    margin-top: 60px;
}

我该如何解决这个问题？

完整演示请参见以下 jsFiddle：http://jsfiddle.net/6kwrY/

【问题讨论】：

你确定是因为margin吗？
需要边距，否则内容从导航栏下方开始。
不是因为边距，而是因为导航栏与您的部分重叠
我的意思是，正如@OneTrickPony 所说，这不是边距。
如果您可以在每个部分添加padding-top: 60px;，那将解决您的问题...

标签： html css twitter-bootstrap

【解决方案1】：

解决方法是使用：

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

【讨论】：

IMO 这个答案比“重复”上的答案要好......那些假设你有 <a name> 标签浮动。使用 HTML5 和 bootstrap role=navigation 你可以有 <section> 标签，这个答案非常适合那些。
这个简单的 hacky 解决方案有效，甚至可以通过 Bootstrap 内置类（例如 pt-2 mt-n2）应用。谢谢。

【解决方案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;
}

【讨论】：