React Bootstrap导航栏如何实现所有元素在同一行展示？

• 男士、女士按钮放在<Nav>组件内部，Bootstrap的<Nav>默认样式适配的是Nav.Link、NavDropdown组件，Button的默认行高、内边距和导航链接不统一，会出现垂直错位。
• 搜索框没有设置宽度限制，挤占了右侧导航元素的可用空间，加上<Nav>默认允许内容换行，宽度不够时购物车、下拉菜单就会被挤到下一行。

按如下规则修改代码即可解决：

1. 给Navbar.Collapse添加垂直居中类，保证内部所有元素垂直对齐
2. 给搜索框外层套容器限制最大宽度，避免占用过多横向空间
3. 给<Nav>添加强制不换行、垂直居中类，避免内部元素折行
4. 给男士、女士按钮添加合适的边距和居中类，和其他导航元素样式对齐

// 仅展示修改的Navbar.Collapse部分，其他代码保持不变
<Navbar.Collapse id='basic-navbar-nav' className="align-items-center">
  {/* 给搜索框增加宽度限制 */}
  <div style={{maxWidth: '280px', marginRight: '1rem'}}>
    <Route render={({ history }) => <SearchBox  history={history} />} />
  </div>
  {/* 给Nav添加不换行、垂直居中属性 */}
  <Nav className='ml-auto flex-nowrap align-items-center'>
    <LinkContainer style={{backgroundColor:'inherit'}} to='/products/men'>
      {/* 按钮加右边距、垂直居中 */}
      <Button name="men" className="mr-2 align-self-center" onClick={(e)=>setFilter(e.target.name)}>Men</Button>              
    </LinkContainer>    
    <LinkContainer style={{backgroundColor:'inherit'}} to='/products/women'>
      <Button name="women" className="mr-3 align-self-center" onClick={(e)=>setFilter(e.target.name)}>Women </Button>
    </LinkContainer>
    {/* 后续购物车、用户下拉、admin下拉代码保持不变 */}
  </Nav>
</Navbar.Collapse>

注：如果你使用的是Bootstrap5版本的React Bootstrap，把上述代码中的mr-2、mr-3替换为me-2、me-3即可。如果调整后中等屏幕下仍有换行，可以把Navbar的expand='lg'属性改为expand='xl'，提升导航栏展开的断点阈值，避免小屏幕下宽度不足。

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