html - Bootstrap 导航栏一些元素居中，其他元素在右边

Question

我正在使用 bootstrap 4 在 ReactJS 中构建我的 NavBar。

我想在导航栏的中心放置一些元素，在右侧放置其他元素。

在这种特殊情况下，我希望在右侧显示注销图标。

这是目前的情况:

这是当前代码:

render () {
        return (
            <nav className="navbar navbar-dark bg-primary fixed-top">
                <Link className="navbar-brand" to="/">
                    App
                </Link>

                {
                    !localStorage.getItem('token') &&
                    <button className="btn btn-dark" onClick={this.loginClicked}>Login</button>
                }
                {
                    localStorage.getItem('token') &&
                    <div className="mx-auto order-0">
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-file-invoice-dollar fa-lg"></i>
                            <sup className="notification-badge"><span class="badge badge-success">1</span></sup>
                        </button>
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-envelope fa-lg"></i>
                        </button>
                        <button className="btn btn-primary btn-lg navbar-btn">
                            <i class="fas fa-cogs fa-lg"></i>
                        </button>
                        <button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
                            <i class="fas fa-sign-out-alt fa-lg"></i>
                        </button>
                    </div>

                }
            </nav>
        );
    }

这就是我想要的:

Answer 1

这是你必须做的:

1. 您甚至不必覆盖 flex 属性。 bootstrap nav 默认带有 display flex & space-around 属性。
2. 如图所示对您的 html 内容进行分组 -A. 导航栏品牌B. 一个包含你想要的元素在中心的父 divC. 您的注销按钮
3. 从您的代码中删除 margin 自动类 (mx-auto order-0) 类。这是罪魁祸首。

将您的 react 代码更改为:

render() {
  return (
    <nav className="navbar navbar-dark bg-primary fixed-top">
      <Link className="navbar-brand" to="/">
        App
      </Link>

      {!localStorage.getItem("token") && (
        <button className="btn btn-dark" onClick={this.loginClicked}>
          Login
        </button>
      )}
      {localStorage.getItem("token") && (
        <React.Fragment>
          <div className="first-part">
            <button className="btn btn-primary btn-lg navbar-btn">
              <i class="fas fa-file-invoice-dollar fa-lg" />
              <sup className="notification-badge">
                <span class="badge badge-success">1</span>
              </sup>
            </button>
            <button className="btn btn-primary btn-lg navbar-btn">
              <i class="fas fa-envelope fa-lg" />
            </button>
            <button className="btn btn-primary btn-lg navbar-btn">
              <i class="fas fa-cogs fa-lg" />
            </button>
          </div>
          <div className="second-part">
            <button
              className="btn btn-outline-danger btn-lg"
              onClick={this.logoutClicked}
            >
              <i class="fas fa-sign-out-alt fa-lg" />
            </button>
          </div>
        </React.Fragment>
      )}
    </nav>
  );
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<nav class="flex-container navbar navbar-dark bg-primary fixed-top">
    <a class="navbar-brand" to="/"> App
    </a>
    <div class="first-part">
        <button class="btn btn-primary btn-lg navbar-btn">
        <i class="fas fa-file-invoice-dollar fa-lg"></i>
        <sup class="notification-badge"><span class="badge badge-success">1</span></sup>
        </button>
        <button class="btn btn-primary btn-lg navbar-btn">
        <i class="fas fa-envelope fa-lg"></i>
        </button>
        <button class="btn btn-primary btn-lg navbar-btn">
        <i class="fas fa-cogs fa-lg"></i>
        </button>
    </div>
    <div class="second-part">
        <button class="btn btn-outline-danger btn-lg">
        <i class="fas fa-sign-out-alt fa-lg"></i>
        </button>
    </div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>