Bootstrap 5导航栏在移动端视图中按钮消失的修复方案咨询

我帮你排查了代码里的核心问题，下面是具体的修复方案和解释：

问题根源 #

你的导航栏用了navbar-expand-xl，意味着屏幕宽度小于1200px时，导航内容会自动折叠到collapse navbar-collapse容器中，但你没有添加Bootstrap要求的折叠触发按钮，导致移动端视图下这些按钮完全被隐藏且没有交互入口，自然看不到内容。另外还有几处小的结构细节需要调整，避免布局错乱。

修复步骤 #

• 添加折叠触发按钮：在品牌Logo之后、折叠容器之前，加入navbar-toggler按钮，绑定对应的data-bs-target到你的折叠容器ID（#navbarSupportedContent），这是移动端唤起导航菜单的关键。
• 简化导航列表结构：Bootstrap 5中navbar-nav不需要额外嵌套nav类，直接用ul class="navbar-nav me-auto"即可，保持结构符合官方规范。
• 统一右侧按钮容器：把登录按钮放到navbar-nav列表里，避免移动端布局出现错位。

修复后的完整代码 #

<nav class="navbar navbar-expand-xl navbar-dark hover-shadow" style="background-color: #252c3a;" role="navigation">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <img src="https://i.imgur.com/pK7YWmW.png" height="60" width="212" alt="Server Knight profile picture.">
    </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 me-auto">
        <li class="nav-item">
          <a class="nav-link active navbar-btn" href="https://discord.com/oauth2/authorize?client_id=801424420605263902&permissions=8589934591&scope=bot">Invite me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active navbar-btn" href="https://discord.gg/yAd6Y2GcTe">DSOF</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link active navbar-btn dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            About the bot
          </a>
          <ul class="dropdown-menu dropdown-background" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" id="dropdown-btn" href="/docs">Docs</a></li>
            <li>
              <hr class="dropdown-divider" style="border-color: #fff">
            </li>
            <li><a class="dropdown-item" id="dropdown-btn" href="/faq">Faq</a></li>
            <li>
              <hr class="dropdown-divider" style="border-color: #fff">
            </li>
            <li><a class="dropdown-item" id="dropdown-btn" href="/team">The team</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link active navbar-btn dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Applications
          </a>
          <ul class="dropdown-menu dropdown-background" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" id="dropdown-btn" href="/appeal">Appeal a report</a></li>
            <li>
              <hr class="dropdown-divider" style="border-color: #fff">
            </li>
            <li><a class="dropdown-item" id="dropdown-btn" href="/apply">Apply to be a bot developer</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link active navbar-btn" href="/donate">Donate</a>
        </li>
      </ul>
      <!-- 调整登录按钮的容器结构，保持和左侧导航一致 -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="/login" class="login-btn nav-link active" id="login-btn">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

额外注意事项 #

• 确保你已经正确引入了Bootstrap 5的CSS文件和JS文件（包括Popper.js，下拉和折叠功能依赖它），缺失资源会导致交互失效。
• 如果你自定义了hover-shadow、navbar-btn等类的样式，要避免设置display: none !important这类强制隐藏规则，防止覆盖Bootstrap的折叠逻辑。

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