Hamburger Menu文本不显示求助：疑似CSS配置遮挡菜单内容

问题根源 #

你遇到的问题主要来自两个方面：HTML结构错误和自定义CSS干扰了Bootstrap导航栏的默认布局。

具体修复步骤 #

1. 修正HTML结构错误
   原代码里多余的</li>和</ul>标签会破坏DOM结构，导致Bootstrap的折叠组件无法正常工作，直接删除这两个标签即可。

2. 调整导航栏CSS

   • 移除nav标签里的height:10vh：固定高度会让展开后的汉堡菜单内容超出导航栏范围，被自动隐藏。
   • 移除nav标签里的display:flex; justify-content:center;：这个设置会打乱Bootstrap导航栏的默认布局逻辑，导致菜单元素位置异常。如果需要让品牌名称居中，直接给.navbar-brand设置margin:0 auto;即可。

3. 确保Bootstrap依赖完整
   确认页面已经正确引入Bootstrap的CSS和JS文件（包括Popper.js，它是Bootstrap折叠功能的依赖），否则汉堡按钮的点击事件无法触发。

修改后的完整代码 #

HTML

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Jerrica</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Pricing</a>
          <a class="nav-link" href="#">Pricing</a>
        </div>
      </div>
    </div>
  </nav>
</body>

CSS

body {
  width: 100%;
  height: 100%;
}

/* 实现品牌名称居中的样式 */
.navbar-brand {
  margin: 0 auto;
}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

.nav-link {
  font-family: "Helvetica", "Arial", "Verdana";
}

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