bootstrap 的导航栏中的 'collapse' 有问题

Question

我正在使用 bootstrap5 和 vue.js 制作响应式导航栏。我用bootstrap的例子做了一个简单的响应式NavBar，但是当我做一些修改并使用'collapse button'时出现了一些问题。下图是我的 NavBar。（桌面设备 UI 和移动设备 UI）

这是我通过折叠打开菜单栏时的图像。当我打开菜单时，右侧的徽标和登录按钮被推到一边。（登录按钮在菜单栏下方）

这是我的代码。

<div class="container-fluid container-lg px-0 px-xl-5">
    <header class="mb-3" :class="{ 'navbar--hidden': !showNavbar }">
      <nav class="navbar navbar-expand-md fixed-top navbar-light">
        <div class="container-fluid container-md mx-0 mx-md-auto bg-white">
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <a class="logo-font fs-4" href="/"> LOGO </a>
          <!-- menu items -->
          <div
            class="collapse navbar-collapse justify-content-center"
            id="navbarNavAltMarkup"
          >
            <div class="navbar-nav text-start">
              <a class="nav-item" href="screen1">menu1</a>
              <a class="nav-item" href="screen1">menu2</a>
              <a class="nav-item" href="screen1">menu3</a>
              <a class="nav-item" href="screen1">menu4</a>
            </div>
          </div>
          <a class="nav-login" href="login">login</a>
        </div>
      </nav>
    </header>
  </div>

请问这个问题的原因和解决方法？提前致谢！

Answer 1

据我了解，您可以复制登录按钮并将其放在菜单项 div 前面，如下所示：

    <div class="container-fluid container-md mx-0 mx-md-auto bg-white">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="logo-font fs-4" href="/"> LOGO </a>
      <a class="nav-login d-sm-none" href="login">login</a>
      <!-- menu items -->
      <div class="collapse show navbar-collapse justify-content-center" id="navbarNavAltMarkup"> 
        <div class="navbar-nav text-start">
          <a class="nav-item" href="screen1">menu1</a>
          <a class="nav-item" href="screen1">menu2</a>
          <a class="nav-item" href="screen1">menu3</a>
          <a class="nav-item" href="screen1">menu4</a>
        </div>
      </div>
      <a class="nav-login d-xs-none" href="login">login</a>
    </div>

然后，您可以使用 bootstrap hiding element class 来控制何时 show/hide 登录按钮。

我希望这个想法对您有所帮助，如果没有，也许您可以提供一个示例片段，以便我们可以更多地了解您的问题。

bootstrap 的导航栏中的 'collapse' 有问题

I have problem with 'collapse' in the bootstrap's navbar

frontend

web

vue.js