Bootstrap 锚点偏移问题答案

【问题标题】：Bootstrap anchor offset issueBootstrap 锚点偏移问题
【发布时间】：2015-08-21 19:38:16
【问题描述】：

我在这里使用带有 Slate 主题的 Bootstrap：http://bootswatch.com/slate/

当跳转到同一页面上的不同锚点时，它会发生偏移，并且不会转到它应该（或不正确显示）的确切内容部分。

这是为了跳到“导航”部分，它几乎可以，但它稍微向下偏移，你看不到标题。

我在我自己的网站上遇到了同样的问题，我该如何解决这个锚问题？

我正在做基础：

<a href="#nav">Jump to Nav</a>

...

<a id="nav">Navs</a>

【问题讨论】：

它正在跳转到正确的位置，顶部的固定菜单覆盖了标题所以你看不到它。您必须将锚点放在标题上方的某个位置，以免菜单覆盖它们。
@Wilq 我已经在自己的工作中尝试过，我有一个我想跳转到的 div，所以我在 HTML 中创建了一个新的锚点，但它根本没有帮助。有什么具体的提示吗？
尝试在您的class="row" div 中添加id="nav"，在其中放置Navs 标头并将其从h1 元素中删除

标签： html twitter-bootstrap

【解决方案1】：

尝试将<a> 包裹在您要跳到的元素周围，例如this 答案建议 - 例如

<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>

【讨论】：

不走运，我试过<h1 style="padding-top: 50px; margin-top: -50px;display: inline-block;"> 和Firefox 仍然有同样的问题。
代码：gist.github.com/rtnielson/7665757 可以粘贴到tutorialrepublic.com/…，然后在尝试跳转到“我的主播”时查看 Chrome 和 Firefox 之间的区别
@JBurace：如果您将内联样式应用于<a>，它似乎可以在FF 中使用——它也可以在Chrome 中使用，但您还需要display: inline-block;

【解决方案2】：

把你的锚放在引导“行”类之上。像这样的东西，它对我有用。

    <a id="nav"></a>
    <div class="row">
      <div class="col-lg-12">
        <div class="page-header">
          <h1>Navs</h1>
        </div>
      </div>
    </div>

【讨论】：

我有一个 <h3>Header</h3>content 代码我想锚定到。我在此之前添加了<a id="nav"></a>，但它根本没有帮助。
没有什么对我有用的......但这确实有效。谢谢@wesley！韦斯利的答案取决于有一个“行”元素......就像我一样。由于所有 div 和行的设置方式，我遇到了无法移动到锚点根本的问题。这解决了它。

【解决方案3】：

我无法得到其他答案；可能是我的错误。但我喜欢 Jan 针对问题 offsetting an html anchor to adjust for fixed header 提供的解决方案；我只需要调整它，因为引导程序将我的锚点埋在段落中。

所以我做了如下样式：

  p a.anchor {
    display: block; 
    position: relative;
    top: -50px; 
    visibility: hidden;
  }

并制作了我所有的锚class="anchor"。这是干净的，只需更新一个参数。

【讨论】：