Bootstrap 5.3自定义菜单无法展开问题求助

你的折叠菜单点击后看似无法显示，核心原因是折叠容器缺少必要的视觉样式配置——Bootstrap的JS已经正常触发了显示状态切换，但因为容器没有背景、内边距等样式，和页面背景融为一体，导致肉眼无法察觉。

具体问题点 #

1. .new-menu容器仅使用了collapse类，无背景色、内边距，显示后无视觉区分度；
2. 列表和链接未使用Bootstrap导航相关样式，即使显示也会显得杂乱。

修复后的代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<header id="masthead" class="site-header">
  <div class="container">
    <div class="site-branding">
      <!-- My Logo -->
    </div>

    <nav id="site-navigation" class="main-navigation navbar">
      <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    </nav>
    <!-- #site-navigation -->

  </div>
  <!-- 添加背景类和内边距类，保证容器可见 -->
  <div class="new-menu collapse bg-body-tertiary p-4" id="navbarToggleExternalContent">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <!-- 添加list-unstyled去掉默认列表样式 -->
          <ul class="list-unstyled">
            <!-- 添加nav-link统一导航链接样式 -->
            <li><a href="#" class="nav-link">aaaa</a></li>
            <li><a href="#" class="nav-link">bbbb</a></li>
            <li><a href="#" class="nav-link">cccc</a></li>
          </ul>
        </div>
        <div class="col-md-3">
          <ul class="list-unstyled">
            <li><a href="#" class="nav-link">aaaa</a></li>
            <li><a href="#" class="nav-link">bbbb</a></li>
            <li><a href="#" class="nav-link">cccc</a></li>
          </ul>
        </div>
        <div class="col-md-3">
          <ul class="list-unstyled">
            <li><a href="#" class="nav-link">aaaa</a></li>
            <li><a href="#" class="nav-link">bbbb</a></li>
            <li><a href="#" class="nav-link">cccc</a></li>
          </ul>
        </div>
        <div class="col-md-3">
          <ul class="list-unstyled">
            <li><a href="#" class="nav-link">aaaa</a></li>
            <li><a href="#" class="nav-link">bbbb</a></li>
            <li><a href="#" class="nav-link">cccc</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- #masthead -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

额外说明 #

• bg-body-tertiary是Bootstrap 5.3默认浅色背景类，可根据需求替换为bg-white、bg-dark等其他背景类；
• p-4用于给容器添加内部间距，避免内容贴边；
• list-unstyled和nav-link用于优化菜单视觉样式，让导航更符合Bootstrap设计规范。

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