求助：仅用Bootstrap创建汉堡菜单，现有代码问题排查

一、原代码的核心问题 #

1. 标签未闭合：<ul class="navbar-nav">、<form>以及外层包裹的<div>都没闭合，导致HTML结构混乱，Bootstrap无法正常解析组件。
2. 结构不规范：Bootstrap导航栏内部元素需要用.container或.container-fluid包裹，否则布局会出现偏移。
3. 细节问题：导航项里的Heealth应为Health，最后一个选项的border-end可以去掉，避免多余边框。

二、修复后的完整代码 #

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Newsweek</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" aria-current="page" href="#">U.S</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">World</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Science</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Cultures</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Autos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Rankings</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Health</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Life</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Opinions</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Experts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Education</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black border-end" href="#">Podcasts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fw-bolder text-black" href="#">Vintage</a>
        </li>
      </ul>
      <form class="d-flex ms-auto" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

三、确保汉堡菜单正常工作的关键 #

1. 引入Bootstrap依赖：在HTML的<head>里添加CSS，<body>末尾添加JS（Bootstrap 5自带Popper，无需单独引入）：

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   

2. 响应式断点控制：navbar-expand-lg表示屏幕宽度≥992px时显示完整导航，小于该宽度自动切换为汉堡菜单。要调整断点的话，换成navbar-expand-md（≥768px）或navbar-expand-sm（≥576px）即可。
3. 自定义样式：如果要修改导航项或汉堡按钮的样式，直接写自定义CSS覆盖Bootstrap默认样式就行，比如：

   .navbar-toggler {
     border-color: #000;
   }
   .nav-link:hover {
     color: #dc3545 !important;
   }
   

内容的提问来源于stack exchange，提问作者Wepngong Maureen