Bootstrap 5 - 文本在 href id 的导航栏下消失

Question

我有一个导航栏，其中有一个 link 到一个容器。当我单击此 link 时，网站滚动到那里，但文本在导航栏下消失了。

link 设置为带有文本 "Content 1" 的容器。有没有办法让导航栏到目前为止不向下滚动，而是保持更高一点，以便 "Content 1" 标题更明显？我正在使用 Bootstrap 5.

代码：

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
  <body>
    <header class="sticky-top">
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
          <div class="container">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#content">Link</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
    </header>

    <div class="container mt-5 mb-5" id="firstContent">
        <div class="row">
            <div class="col-md-6">
                <h2>First Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
            
            <div class="col-md-6">
                <h2>Second Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
        </div>
    </div>
    
    <div class="container mt-5 mb-5" id="firstContent">
        <div class="row">
            <div class="col-md-6">
                <h2>First Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
            
            <div class="col-md-6">
                <h2>Second Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
        </div>
    </div>
    
    <div class="container mt-5 mb-5 m-auto" id="content">
        <div class="row">
            <div class="col-md-6">
                <h2>Content 1</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
            
            <div class="col-md-6">
                <h2>Content 2</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
        </div>
    </div>
    
    <div class="container mt-5 mb-5" id="firstContent">
        <div class="row">
            <div class="col-md-6">
                <h2>First Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
            
            <div class="col-md-6">
                <h2>Second Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
        </div>
    </div>
    
    <div class="container mt-5 mb-5" id="firstContent">
        <div class="row">
            <div class="col-md-6">
                <h2>First Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
            
            <div class="col-md-6">
                <h2>Second Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
        </div>
    </div>
    
    <div class="container mt-5 mb-5" id="firstContent">
        <div class="row">
            <div class="col-md-6">
                <h2>First Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
            
            <div class="col-md-6">
                <h2>Second Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
        </div>
    </div>
    
    <div class="container mt-5 mb-5" id="firstContent">
        <div class="row">
            <div class="col-md-6">
                <h2>First Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
            
            <div class="col-md-6">
                <h2>Second Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
        </div>
    </div>
    
    <div class="container mt-5 mb-5" id="firstContent">
        <div class="row">
            <div class="col-md-6">
                <h2>First Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
            
            <div class="col-md-6">
                <h2>Second Title</h2>
                    <ul>
                        <li>Some text and follow this <a href="readme.html">Link</a> along</li>
                        <li>Then read the code at Github</li>
                    </ul>
                <hr>
            </div>
        </div>
    </div>

</body>

</html>

Answer 1

对我来说，它适用于：

* {
    scroll-margin-top: 6rem;
}

Bootstrap 5 - 文本在 href id 的导航栏下消失

Bootstrap 5 - Text disappears under navbar at href id

html

css

responsive

bootstrap-5