如何向 Bootstrap 4 固定顶部响应式导航栏添加数据偏移量？答案

【问题标题】：How do I add a data-offset to a Bootstrap 4 fixed-top responsive navbar?如何向 Bootstrap 4 固定顶部响应式导航栏添加数据偏移量？
【发布时间】：2016-09-20 08:13:32
【问题描述】：

因此，在 Bootstrap v3 中，您只需将 data-offset 属性添加到 nav 标签，像素偏移量，在本例中为 54px，

<nav data-offset="54"></nav>

然而，在 Bootstrap v4 中，这个 data-offset 属性缺失，并且不起作用。我浏览了 v4 文档，但似乎找不到任何东西！我也尝试过使用data-offset 和offset 属性，但这些也不起作用。

这是导航的html代码

<nav class="navbar navbar-light bg-faded navbar-fixed-top">
  <button type="button" data-toggle="collapse" data-target="#nav-collapse" aria-controls="#nav-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler hidden-md-up">&#9776;</button>
  <div id="nav-collapse" class="collapse navbar-toggleable-sm">
    <ul class="nav navbar-nav pull-md-right">
      <li class="nav-item"><a href="#page-top" class="nav-link page-scroll">home</a></li>
      <li class="nav-item"><a href="#about" class="nav-link page-scroll">about</a></li>
      <li class="nav-item"><a href="#services" class="nav-link page-scroll">services</a></li>
      <li class="nav-item"><a href="#productssolutions" class="nav-link page-scroll">products + solutions</a></li>
      <li class="nav-item"><a href="#contact" class="nav-link page-scroll">contact</a></li>
    </ul>
  </div>
</nav>

如何添加 54px 的数据偏移量？有没有可以使用的替代方法，比如需要用几行 js 将一个简单的脚本标签添加到我的 html 中？

【问题讨论】：

你想用导航做什么？在 3.x 中，data-offset 被 Scrollspy 组件（不是专门用于导航栏）使用，在 4.x 中并没有真正改变。
当我点击链接时，我希望它转到该部分的顶部，但导航覆盖了顶部的 54px。所以，基本上，我希望导航的底部位于每个部分的顶部。
固定导航栏将始终覆盖顶部50px，这就是body padding is recommended的原因。
@ZimSystem 是的，确实如此，但是我希望锚点偏移-54px，但没关系，我找到了答案

标签： navigation navbar nav bootstrap-4 twitter-bootstrap-4

【解决方案1】：

所以我最终修复它的方法是在每个部分的顶部添加一个单独的元素；

<span class="anchor" id="SECTION"></span>
<section id="SECTION" REST OF SECTION HERE>
    ....

section元素中的id是为了让scroll spy正常工作。

并将其添加到我的 css 文件中；

span.anchor {
    margin-top: -54px; /* height of nav, in this case 54px */
    display: block;
    height: 54px; /* height of nav, in this case 54px */
    visibility: hidden;
    position: relative;
}

然后，嘿，快！它奏效了，而且这个解决方案的一个好处是它不会在视觉上影响任何东西，它只是改变了锚点。

【讨论】：

通过向<span class="anchor"></span> 和<section></section> 添加一个ID，它会选择“顶级”锚。
这很好，因为它允许导航中的滚动间谍正常工作。

【解决方案2】：

您可以在您所指的每个部分中添加padding-top。

<a href="#section1">Section 1</a>
...
<section id="section1" class="pt-5">
   <!-- section text -->
</section>

如果 padding 不够大，可以添加自己的类

.section-anchor-padding { padding-top: 54; }

【讨论】：