Bootstrap 修复了导航栏阻止内容链接到页面上的问题

Question

我正在使用 bootstrap 4，我在屏幕顶部有一个导航栏，固定顶部类，它工作得很好，除非我链接到页面上的某些内容。

因此，如果我有一个元素在导航栏链接之一中定位到页面下方，使用 href="#introduction"，页面将跳转到该部分，但目标元素的顶部将被切断通过导航栏。这似乎只发生在我从下拉项中定位元素时。我已尝试使用正常的导航栏链接，但没有遇到这种行为。

请参阅此fiddle 以了解我的意思 - 如果您单击下拉按钮，然后单击“介绍”，您将看到它是如何被截断的（截断 jumbotron 的标题）：

<nav class="navbar navbar-expand-md navbar-dark navbar-default sticky-top bg-dark">
    <a class="navbar-brand" href="#">Test</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Test</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#introduction">Introduction</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<main role="main" class="container-fluid">
    <div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-10">
            <p style="margin-bottom:1300px">
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
            <div class="jumbotron jumbostyle" id="introduction">
                <h2>
                    Hello, world!
                </h2>
                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>
                </p>
            </div>
            <p style="margin-bottom:1300px">
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
        <div class="col-md-1">
        </div>
    </div>
</main>

有人知道如何解决这个问题吗？

Answer 1

您可以通过在后面添加 3 或 4 个<br> 来解决此问题

<div class="jumbotron jumbostyle" id="introduction">

暂时可以解决这个问题。

对于最佳实践，您可以检查每个类样式，例如 jumbostyle，以了解究竟是什么解决了这个问题。

但你可以只添加 3 或 4 个 <br> 就可以了。

检查这个：Example

Answer 2

我假设您可以控制页面上显示的内容。在这种情况下，您可以为目标 id #introduction 的内容 div 提供一个带有导航栏高度（大约 100 像素）的 padding-top。

<div class="jumbotron jumbostyle" id="introduction" style="padding-top:100px">

为了使它更好，您可以考虑为这种样式创建一个自定义类或使用引导程序spacing utilities。请不要将此样式添加到#introduction 标签！

Answer 3

找到答案：

我用固定顶代替粘顶，然后添加

body {
    padding-top: 70px
}

到 CSS 和

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

到脚本。

请看这里：https://jsfiddle.net/ao3b0m95/

编辑：我认为我不需要 CSS，只需 JS 即可完成工作。