ReactJS+Bootstrap4导航栏：部分元素居中，登出图标居右实现

嘿，我来帮你搞定这个导航栏布局！你的需求很明确——中间的功能按钮居中，登出按钮单独居右，咱们利用Bootstrap4的flex布局特性就能轻松实现，不需要额外写自定义CSS。

问题分析 #

你当前的代码把所有按钮（包括登出）都放在了带mx-auto的容器里，导致所有元素都挤在中间。咱们只需要把登出按钮从这个容器里拆出来，让它成为导航栏的直接子元素，就能利用flex布局的特性让它自动居右。

修改后的代码 #

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>
      ) : (
        <>
          {/* 中间居中的功能按钮组 */}
          <div className="mx-auto">
            <button className="btn btn-primary btn-lg navbar-btn">
              <i className="fas fa-file-invoice-dollar fa-lg"></i>
              <sup className="notification-badge"><span className="badge badge-success">1</span></sup>
            </button>
            <button className="btn btn-primary btn-lg navbar-btn">
              <i className="fas fa-envelope fa-lg"></i>
            </button>
            <button className="btn btn-primary btn-lg navbar-btn">
              <i className="fas fa-cogs fa-lg"></i>
            </button>
          </div>
          {/* 右侧登出按钮 */}
          <button className="btn btn-outline-danger btn-lg" onClick={this.logoutClicked}>
            <i className="fas fa-sign-out-alt fa-lg"></i>
          </button>
        </>
      )}
    </nav>
  );
}

关键调整点 #

1. 拆分登出按钮：把登出按钮从中间的mx-auto容器中移出来，作为<nav>的直接子元素。Bootstrap的navbar本身是flex容器，子元素会自动按水平方向排列，登出按钮会被自然挤到最右侧。
2. 保留mx-auto实现居中：中间的功能按钮容器保留mx-auto类，这个类会给容器添加margin-left: auto和margin-right: auto，在flex布局中，这个容器就会自动居中显示。
3. 修正React属性：把所有class改成React要求的className（你原来的代码里图标标签用了class，这会在React里报错，已经帮你修正了）。
4. 优化条件渲染：把原来的两个独立{}条件渲染改成三元表达式，用<> Fragment包裹多个元素，代码结构更整洁。

这样调整后，导航栏就会呈现出你想要的效果：左侧是品牌名称，中间的功能按钮组居中，右侧是登出按钮。

内容的提问来源于stack exchange，提问作者Dave