Question

我正在使用引导程序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

这是您要做的：

您甚至不必覆盖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>

Answer 2

您可以像这样使用display：flex和align-content：space-space：

.wrapper{
 width: 100%;
}
.mid_to_right{
 padding-left: 50%;
 background-color: red;
 display: flex;
 flex-flow: row nowrap;
 flex-basis: 100%;
 justify-content: space-between;
}

.left{
 display: flex;
flex-flow: row nowrap;
}

.icon{
 width: 50px;
 height: 50px;
 background-color: yellow;
}

.left .icon{
 background-color: green;
}

<div class="wrapper">
  <div class="mid_to_right">
    <div class="left">
      <div class="icon">
      </div>
      <div class="icon">
      </div>
      <div class="icon">
      </div>
    </div>
    <div class="right">
      <div class="icon">
      </div>
    </div>
  </div>
</div>

Answer 3

如here和here所述，您必须考虑相邻flexbox项的宽度，以确保中心内容实际上位于视口的中心。

使用Bootstrap 4的最简单方法是使用w-100实用工具类，以确保3个独立的flexbox子代始终均等地填充宽度，然后根据需要对齐...

<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand">
    <a class="navbar-brand w-100" to="/">
        App
    </a>
    <div class="d-flex">
        <div class="text-nowrap">
            <button class="btn btn-primary btn-lg navbar-btn">
                <i class="fas fa-star fa-lg"></i>
            </button>
            <button class="btn btn-primary btn-lg navbar-btn">
                <i class="fas fa-envelope fa-lg"></i>
                <sup><span class="badge badge-success">1</span></sup>
            </button>
            <button class="btn btn-primary btn-lg navbar-btn">
                <i class="fas fa-cogs fa-lg"></i>
            </button>
        </div>
    </div>
    <div class="w-100 text-right">
        <button class="btn btn-outline-danger btn-lg" onclick="{this.logoutClicked}">
            <i class="fas fa-sign-out-alt fa-lg"></i>
        </button>
    </div>
</nav>

https://www.codeply.com/go/SRy82V3M76

引导导航栏，某些项居中，其他项居右

3 个答案: