React bootstrap 导航栏不会显示在 1 行

Question

我的 React 应用程序中有一个引导程序导航栏，我添加了一个基于 Auth0 身份验证的管理下拉列表。所以基本上，如果我登录了，我会看到管理菜单，如果我不是我没有。此代码用于工作，菜单始终显示在 1 行。现在我的注销按钮下降到第 2 行。

所有项目的导航栏，这会添加一个登录按钮或一个管理菜单和注销按钮 -->

const AuthNav = () => (
  <div className="navbar-nav ml-auto">
    <AuthenticationButton />
  </div>
);

export default AuthNav;

AuthNav 只是添加了身份验证按钮

const AuthenticationButton = () => {
  const { isAuthenticated } = useAuth0();

  return isAuthenticated ? 
    <div>
      <NavDropdown title="Admin" id="dropdown-menu-align-right">
        <NavDropdown.Item href="/CreateMap">Create Map</NavDropdown.Item>
        <NavDropdown.Item href="/EditMap">Edit Existing Map</NavDropdown.Item>
        <NavDropdown.Item href="/Profile">User Profile Auth0</NavDropdown.Item>
      </NavDropdown>
      <LogoutButton />
</div>
  : <LoginButton />;
};

export default AuthenticationButton;

身份验证按钮确定 Auth0 的状态并显示登录或管理员和注销

x.__getattr__

注销曾经显示在单个导航栏行上我的管理菜单旁边，现在由于某种原因它下降到第 2 行。我希望所有项目都在一行上

从截图来看，我的空间不足，但它是合理的，只占总页面的 1/3 左右，所以不是空间问题