Bootstrap 5 Navbar手机端无法折叠且不显示问题求助

嘿，我仔细看了你的代码，很快就找到了几个导致移动端Navbar无法正常显示的关键问题，咱们一步步来修复：

1. 修复data-bs-target属性的拼写错误 #

你在navbar-toggler按钮里的data-bs-target属性多了一个空格，写成了data-bs- target——这个小错误会让Bootstrap完全识别不到这个属性，导致点击汉堡菜单时根本无法展开Navbar内容。

把这行错误代码：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

改成：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

2. 检查Bootstrap脚本的路径 #

你的脚本引用里写了/js/bootstrap.bundle.min.js，如果你的项目里js文件夹不是在网站根目录下，这个绝对路径会找不到文件，直接导致Bootstrap的折叠功能失效。可以改成相对路径（如果js文件夹和当前HTML文件同级的话）：

<script src="js/bootstrap.bundle.min.js"></script>

或者确认你的服务器上这个绝对路径确实存在对应的文件。

3. 排查自定义样式的干扰 #

检查你的style.css里有没有写可能隐藏Navbar或者破坏布局的样式，比如给.navbar加了display: none、overflow: hidden这类规则，如果有的话需要调整这些样式，保证移动端Navbar的正常显示逻辑。

修复后的完整Navbar代码 #

我还顺手帮你修正了Twitter按钮里多写的一个</i>标签，避免HTML结构错误：

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img class="logo" src="photo/LOGO.png" alt="logo"></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 justify-content-center" id="navbarSupportedContent">
      <ul class="nav justify-content-center">
        <li class="nav-item">
          <a class="nav-link " href="index.html"><button class="btn btn-outline-dark" type="submit">Home</button></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="oO.html"><button class="btn btn-outline-dark" type="submit">OO</button></a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#"><button class="btn btn-dark" type="submit">RR</button></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="NN.html"><button class="btn btn-outline-dark" type="submit">NN</button></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="CC.html"><button class="btn btn-outline-dark" type="submit">CC</button></a>
        </li>
      </ul>
    </div>
    <form class="d-flex">
      <button class="btn btn-outline-dark me-3" type="submit"><i class="bi bi-twitter"></i></button>
      <button class="btn btn-outline-dark me-3" type="submit"><i class="bi bi-discord"></i></button>
    </form>
  </div>
</nav>

按照上面的步骤修改后，你马上就能测试移动端Navbar的显示和展开功能了，应该能解决你的问题。

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