如何向 Bootstrap 4 固定顶部响应式导航栏添加数据偏移量?
How do I add a data-offset to a Bootstrap 4 fixed-top responsive navbar?
因此,在 Bootstrap v3 中,您只需将数据偏移属性添加到导航标签,像素偏移,在本例中为 54px,
<nav data-offset="54"></nav>
但是,在 Bootstrap v4 中,此数据偏移量属性缺失,并且不起作用。我已经查看了 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">☰</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?
所以我最终修复它的方法是在每个部分的顶部添加一个单独的元素;
<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;
}
然后,嘿,转瞬即逝!它奏效了,这个解决方案的一个好处是它不会在视觉上影响任何东西,它只是改变了锚点。
您可以在您所指的每个部分添加 padding-top
。
<a href="#section1">Section 1</a>
...
<section id="section1" class="pt-5">
<!-- section text -->
</section>
如果填充不够大,您可以添加自己的 class
.section-anchor-padding { padding-top: 54; }
因此,在 Bootstrap v3 中,您只需将数据偏移属性添加到导航标签,像素偏移,在本例中为 54px,
<nav data-offset="54"></nav>
但是,在 Bootstrap v4 中,此数据偏移量属性缺失,并且不起作用。我已经查看了 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">☰</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?
所以我最终修复它的方法是在每个部分的顶部添加一个单独的元素;
<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;
}
然后,嘿,转瞬即逝!它奏效了,这个解决方案的一个好处是它不会在视觉上影响任何东西,它只是改变了锚点。
您可以在您所指的每个部分添加 padding-top
。
<a href="#section1">Section 1</a>
...
<section id="section1" class="pt-5">
<!-- section text -->
</section>
如果填充不够大,您可以添加自己的 class
.section-anchor-padding { padding-top: 54; }