twitter-bootstrap Bootstrap 锚点偏移问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20226001/
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
Bootstrap anchor offset issue
提问by JBurace
I'm using Bootstrap with the Slate theme here: http://bootswatch.com/slate/
我在这里使用带有 Slate 主题的 Bootstrap：http: //bootswatch.com/slate/
When jumping to different anchors on the same page, it's offset and doesn't go to the exact content section it should (or not display right).
当跳转到同一页面上的不同锚点时，它会偏移并且不会转到它应该（或不正确显示）的确切内容部分。
For example: http://bootswatch.com/slate/#nav
例如：http: //bootswatch.com/slate/#nav
This is intended to jump to the "Navs" section and it almost does, but it's slightly offset down and you cannot see the title.
这是为了跳转到“导航”部分，它几乎可以，但它稍微向下偏移，你看不到标题。
I'm experiencing the same issue on my own site with this theme, how can I fix this anchor issue?
我在我自己的网站上遇到了这个主题的同样问题，我该如何解决这个锚点问题？
I'm doing the basic:
我在做基本的：
<a href="#nav">Jump to Nav</a>
...
<a id="nav">Navs</a>
回答by user3142418
Try wrapping an <a>around the element you want to skip to, like thisanswer suggests - e.g.
尝试将<a>要跳到的元素包裹起来，就像这个答案所建议的那样 - 例如
<a href="#nav">Jump to nav</a>
<a id="nav">
<h1 style="padding-top: 50px; margin-top: -50px;">Test</h1>
<!-- Offsets the fixed navbar -- just an example, this should be in CSS -->
</a>
回答by wesley
Put you anchor above the bootstrap "row" class. Something like this, it worked for me.
将您锚定在引导程序“行”类之上。像这样的东西，它对我有用。
<a id="nav"></a>
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1>Navs</h1>
</div>
</div>
</div>
回答by John G
I couldn't get the other answers to work; may have been my error. But I liked the solution offered by Jan to the question offsetting an html anchor to adjust for fixed header; I just had to tweak it because bootstrap buried my anchors in paragraphs.
我无法得到其他答案；可能是我的错误。但我喜欢 Jan 为抵消 html 锚点以调整固定标题的问题提供的解决方案；我只需要调整它，因为引导程序将我的锚点埋在段落中。
So I made the style as follows:
所以我做了如下风格：
p a.anchor {
display: block;
position: relative;
top: -50px;
visibility: hidden;
}
and made all my anchors class="anchor". This is clean and just one parameter to update.
并制作了我所有的锚class="anchor"。这很干净，只需更新一个参数。
