Bootstrap 导航栏一些项目居中，另一些项目在右侧

debugcn 发表于 Dev

小丑

我正在使用 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>
        );
    }

这就是我想要的：

阿凡提卡

以下是您必须执行的操作：

您甚至不必覆盖 flex 属性。默认情况下，引导导航带有 display flex & space-around 属性。
如图所示对您的 html 内容进行分组 - A. 导航栏品牌 B. 包含您想要的元素的父 div C. 您的注销按钮
从您的代码中删除边距自动类（mx-auto order-0）类。这是罪魁祸首。

将您的反应代码更改为：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。