如何将数据偏移添加到 Bootstrap 4 固定顶部响应式导航栏? [英] How do I add a data-offset to a Bootstrap 4 fixed-top responsive navbar?

问题描述

因此，在 Bootstrap v3 中，您只需向导航标签添加一个 data-offset 属性，以及像素偏移，在本例中为 54px，

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

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

这是导航的html代码

<button type="button" data-toggle="collapse" data-target="#nav-collapse" aria-controls="#nav-collapse" aria-expanded="false" aria-label="切换导航"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">产品+解决方案</a></li><li class="nav-item"><a href="#contact" class="nav-link page-scroll">contact</a></li>

</nav>

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

解决方案

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

<section id="SECTION" 其余部分在这里>....

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

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

span.anchor {边距顶部:-54px；/* 导航高度，在本例中为 54px */显示:块；高度:54px；/* 导航高度，在本例中为 54px */可见性:隐藏；位置:相对；}

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

So, in Bootstrap v3, you would just add a data-offset attribute to the nav tag, with the pixel offset, in this case 54px,

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

However, in Bootstrap v4, this data-offset attribute is missing, and doesn't work. I've had a look through the v4 docs, and just can't seem to find anything! I've also tried using data-offset and offset attributes, but these don't work either.

Here is the html code of the nav

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

How would I go about adding a data offset of 54px? Is there an alternative that could be used, say a simple script tag needing to be added to my html with a few lines of js?

解决方案

So the way I ended up fixing it was by adding a separate element on top of each of the sections;

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

The id in the section element is to allow for scroll spy to work correctly.

and by adding this to my css file;

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

and then, hey presto! It worked, and one nice thing about this solution is that it doesn't affect anything visually, it just changes the anchor point.

这篇关于如何将数据偏移添加到 Bootstrap 4 固定顶部响应式导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！