问题描述
因此,在Bootstrap v3中,您只需将数据偏移属性添加到nav标签中,并使用像素偏移,在这种情况下为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>
但是,在Bootstrap v4中,此data-offset属性丢失,并且不起作用.我浏览了v4文档,但似乎什么都找不到!我也尝试过使用data-offset
和offset
属性,但是这些也不起作用.
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.
这是导航的html代码
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">☰</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中?
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>
....
section元素中的id是为了允许滚动间谍正常工作.
The id in the section element is to allow for scroll spy to work correctly.
并将其添加到我的css文件中;
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固定顶部响应式导航栏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!