使用引导程序 5 单击导航栏中的元素时如何到达正确的部分？答案

【问题标题】：How to get to the correct section when clicking element in nav bar using bootstrap 5?使用引导程序 5 单击导航栏中的元素时如何到达正确的部分？
【发布时间】：2022-01-21 14:18:06
【问题描述】：

我是前端开发的新手，希望你们能就这个话题得到一些澄清。我需要建立一个网站，在其中实现导航栏，当单击此导航栏中的元素或链接时，它应该向下滚动到网页的正确部分。都是单页纸。

我的问题是如何使用 bootstrap 5 和/或外部 css 样式表来实现导航栏，该样式表与以下元素对齐：关于我、随机事实、技能、投资组合、联系我，例如何时单击随机事实，它会向下滚动到随机事实。

我也想知道两者之间到底有什么区别 """ a class="nav-link active" aria-current="page" href="#" """ 和标准 """a class="nav-link" href="#" """ 是。

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fabian Zaiser</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 ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">About Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Random Facts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Skills</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
</body>

这是我目前拥有的。非常感谢你们。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/…

标签： html css bootstrap-5

【解决方案1】：

Add CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Add JS
<script src=" https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js " integrity=" sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin=" anonymous "></script>
<script src=" https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js " integrity=" sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/ " crossorigin=" anonymous "></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Fabian Zaiser</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">
            <!-- ml-auto still works just fine-->
            <div class="navbar-nav ml-auto mb-2 mb-lg-0">
              <a class="nav-link active" aria-current="page" href="#">About Me</a>
              <a class="nav-link" href="#randomfacts">Random Facts</a>
              <a class="nav-link" href="#">Skills</a>              
            </div>
          </div>
        </div>
      </nav>
      
      <div id="randomfacts">

        Random Facts
      </div>

对于这个问题，“例如点击随机事实，它会向下滚动到随机事实。”需要添加 div id 和 href 是一样的，所以我们可以向下滚动到确切的 div。

【讨论】：