Bootstrap 5 导航栏菜单切换器不会在移动浏览器上打开答案

【问题标题】：Bootstrap 5 Navbar menu toggler will not open on mobile browsersBootstrap 5 导航栏菜单切换器不会在移动浏览器上打开
【发布时间】：2021-09-12 08:02:05
【问题描述】：

第一次来。我的 Bootstrap 5.1 导航栏菜单有问题。一些背景：我通过 Xampp 在本地托管我的网站，我的页面是 php 以允许表单和 cookie。一切都在桌面上运行良好。我已经在不同尺寸的设备上测试了我的站点在 DevTools 中的响应能力，并且下拉菜单（折叠的导航菜单）在这些设备上完美运行。然后，我使用本地托管的服务器在我的 S21 Ultra 和 Tab S6 上尝试了下拉菜单。当汉堡切换器出现时，它不会下拉菜单。我尝试删除按钮图标，以便我可以查看按钮是否正在切换，但它似乎并没有像在桌面或 DevTools 中那样实际更改导航栏的任何值。我已经尝试了一切。我的代码是最新的，并且 Bootstrap 的 js 和 css 放置在正确的位置。请帮忙。

          <nav class="navbar navbar-expand-lg navbar-light">
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                  <li class="nav-item dropdown">
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="REDACTED.php">REDACTED</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="REDACTED.php">REDACTED</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="REDACTED.php">*REDACTED*</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="REDACTED.php">*REDACTED*</a>
                  </li>
                </ul>
              </div>
          </nav>

同样，它可以在桌面和移动视图中使用 Chrome 上的 DevTools 正常工作。任何更改（CSS 方面）仅针对颜色和大小，因此它们不应干扰。网页上的所有其他按钮都可以使用。我真的不确定如何前进。

我只需要在使用移动设备时打开下拉菜单。

【问题讨论】：

不记得确切的方法，所以你必须谷歌它。但是您可以将带有 USB 的手机连接到您的电脑，然后将其与 Chrome 连接。这将允许您在桌面上的 Chrome 上显示移动浏览器控制台日志，以便您查看正在发生的任何错误。毫无疑问，这是您应该开始的第一个地方。因为这里没有人能在至少不知道错误是什么的情况下帮助您。

标签： javascript html css navbar bootstrap-5

【解决方案1】：

从 data-bs-target 和 data-bs-toggle 中删除 -bs-，如下所示。

 <nav class="navbar navbar-expand-lg navbar-light">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
              <li class="nav-item dropdown">
              </li>
              <li class="nav-item">
                <a class="nav-link" href="REDACTED.php">REDACTED</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="REDACTED.php">REDACTED</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="REDACTED.php">*REDACTED*</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="REDACTED.php">*REDACTED*</a>
              </li>
            </ul>
          </div>
      </nav>

【讨论】：