Boostrap 导航栏项目

Question

我正在设置导航栏，但一直在尝试水平对齐导航栏项目。出于某种原因，它在用户通过身份验证时工作正常，但对于第一个条件（！身份验证），我无法使导航栏项目对齐。我是否在某处错过了引导程序类？

这是我的代码：

   import React from "react";
   import { Link, withRouter, useHistory } from "react-router-dom";
   import { isAuthenticated, logout } from "./helpers/auth";

export function Header({ history }) {
const handleLogout = (evt) => {
logout(() => {
  history.push("/signup");
});
};
 return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
  <Link to="/" className="navbar-brand">
    MTS
  </Link>
  <button
    className="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span className="navbar-toggler-icon"></span>
  </button>

  <div className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul className="navbar-nav nav ml-auto mt-2 mt-lg-0">
      {!isAuthenticated() && (
        <div>
          <li className="nav-item ">
            <Link to="/" className="nav-link">
              Home <span className="sr-only">(current)</span>
            </Link>
          </li>

          <li className="nav-item ">
            <Link to="/Signup" className="nav-link">
              Signup <span className="sr-only">(current)</span>
            </Link>
          </li>

          <li className="nav-item ">
            <Link to="/Signin" className="nav-link">
              Signin <span className="sr-only"></span>
            </Link>
          </li>

          <li className="nav-item ">
            <Link to="/blog" className="nav-link">
              Blog <span className="sr-only"></span>
            </Link>
          </li>

          <li className="nav-item ">
            <Link to="/prod" className="nav-link">
              Products <span className="sr-only"></span>
            </Link>
          </li>

          <li className="nav-item ">
            <Link to="/aboutus" className="nav-link">
              About Us <span className="sr-only"></span>
            </Link>
          </li>
        </div>
      )}
      {isAuthenticated() && isAuthenticated().role === 0 && (
        <div>
          <li className="nav-item ">
            <Link to="/" className="nav-link">
              Home <span className="sr-only">(current)</span>
            </Link>
          </li>
        </div>
      )}
      {isAuthenticated() && isAuthenticated().role === 1 && (
        <div>
          <li className="nav-item ">
            <Link to="/admin/dashboard" className="nav-link">
              Dashboard <span className="sr-only">(current)</span>
            </Link>
          </li>
        </div>
      )}
      {isAuthenticated() && (
        <div>
          <li className="nav-item">
            <button
              onClick={handleLogout}
              className="btn btn-link text-secondary text-decoration-none pl-0"
            >
              Logout <span className="sr-only">(current)</span>
            </button>
          </li>
        </div>
      )}
    </ul>
  </div>
</nav>
);
}
export default withRouter(Header);