Question

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

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

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

我在自己的网站上遇到与此主题相同的问题，如何修复此锚定问题？

我正在做基本的事情：

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

...

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

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

Answer 2

将你锚定在bootstrap“row”类之上。像这样的东西，它对我有用。

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

Answer 3

我无法得到其他工作的答案;可能是我的错误。但我喜欢Jan提出的问题offsetting an html anchor to adjust for fixed header;我只需要调整它，因为bootstrap将我的锚点埋在段落中。

所以我的风格如下：

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

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

Bootstrap锚点偏移问题

3 个答案: