在 Bootstrap 5 中单击时如何使导航栏切换以显示导航栏

我正在使用 Bootstrap 5 并创建了一个导航栏,我希望它在折叠时切换并在单击时显示导航栏。当我调整浏览器大小时,会出现切换器图标,但当我点击它时,它不会显示我的导航栏。我遵循了这个论坛上的人向与我有类似问题的人提供的每一条建议。我已经通过 npm 安装了 Jqquery 和 Bootstrap 5 并将它们添加到我的 angular.json 文件的 scripts:[] 部分,但它仍然不起作用。

没有什么是我没试过的。我将数据切换从 data-toggle="" 更改为 data-bs-toggle="",添加了 aria-controls、id、data-target 或 data-bs-target,但它仍然不起作用。

我的代码如下:

<!-- Navbar-->
  <nav
    class="
      navbar navbar-transparent navbar-color-on-scroll
      fixed-top
      navbar-expand-lg
    "
    color-on-scroll="100"
    id="sectionsnav"
  >
    <div class="container">
      <div class="navbar-translate">
        <a routerLink="#" class="navbar-brand"
          ><img
            src="../../../assets/img/comgreen.png"
            style="width: 50px; height: 50px;"
            alt=""
          /><strong>Comgreen</strong></a
        >
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="sr-only">Toggle navigation</span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a
              href=""
              class="nav-link"
              rel="tooltip"
              title=""
              data-placement="bottom"
              target=""
              data-original-title="Log in with your credentials"
            >
              <i class="material-icons">fingerprint</i>Login
            </a>
          </li>
          <li class="nav-item">
            <a
              href=""
              class="nav-link"
              rel="tooltip"
              title=""
              data-placement="bottom"
              target=""
              data-original-title="Don't have an account? Register"
            >
              <i class="material-icons">person_add</i>Register
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!--End of Navbar-->

在我的 angular.json 文件中,我的脚本中有这个:

"scripts": [
              "./node_modules/jquery/dist/jquery.min.js","./node_modules/bootstrap/dist/js/bootstrap.js","./node_modules/@popperjs/core/dist/umd/popper.min.js"
            ]

有些人建议我为每个添加另一个点,使它们成为 (../node_modules/....) 但每次我尝试时,我都会收到一条错误消息,指出路径不存在。我是角度和引导程序的新手。这花了我三天时间,我需要有人指出我的错误。

提前致谢。

qinggeyuan 回答:在 Bootstrap 5 中单击时如何使导航栏切换以显示导航栏

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/26878.html

大家都在问