我的导航链接未按预期工作，我该如何纠正此问题

Question

我正在构建一个简单的食谱网站，我有 3 个导航链接：

• 首页
• 食谱
• 关于我们。

我的 id 属性与 href 属性中的值匹配，但导航链接仍然不活动或向下滚动到其预期部分。我还没有制作关于我们的部分。我正在使用 HTML、CSS 和 Bootstrap，不懂任何 JavaScript。

<header id="header-section">

  <div class="container">
    <ul class="nav nav-pills">
      <li class="nav-item"><a href="#header-section" class="nav-link">Home</a></li>
      <li class="nav-item"><a href="#recipe-section" class="nav-link">Recipes</a></li>
      <li class="nav-item"><a href="#about-section" class="nav-link">About Us</a></li>
    </ul>
  </div>

  <section class="recipe" id="recipe-section">
    <div>
      <h4>My passport may be collecting dust, but my taste buds are on a global adventure!</h4>
    </div>

我尝试将导航链接放在标题部分之外，看看它是否有效，但没有任何效果。我将它们返回到标题部分，因为我喜欢它在导航链接和标题部分使用一张背景图像的外观。

Answer 1