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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17181355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:22:29  来源:igfitidea点击:

Boostrap using fixed navbar and anchor tags to jump to sections

htmlcsstwitter-bootstrap

提问by Justin

I am trying to use anchor tags to navigate to specific sections of a webpage using bootstrap and a navbar that is fixed to the top. The problem is when I click the anchor links, they don't correctly scroll to the start of the section, it scrolls past the section start, because of the margin applied to the body.

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

body {
    margin-top: 60px;
}

How can I fix this?

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

See the following jsFiddle for a full demo: http://jsfiddle.net/6kwrY/

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

回答by Justin

The solution is to use:

解决方法是使用:

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

回答by redditor

Add a margin via padding for all section p's unless they are called 'first'.

通过填充为所有部分 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;
}