react-bootstrap如何将指定Nav.Link右对齐且保留在Navbar.Collapse内

解决方案 #

你可以通过两种方式实现登出项单独右对齐，且不影响其他导航项的位置，两种方案都保留登出项在Navbar.Collapse内部，移动端折叠时显示正常：

方案1：拆分导航容器（更易维护）

将普通导航项和登出项拆分到两个独立的<Nav>组件中，给包裹登出项的<Nav>添加自动左间距属性即可：

• 若你使用的是Bootstrap 5（对应React Bootstrap v2.x及以上版本），使用ms-auto
• 若你使用的是Bootstrap 4（对应React Bootstrap v1.x版本），使用ml-auto
  修改后完整代码如下：

import "./NavBar.css"
import '@fortawesome/fontawesome-free/css/all.min.css';
export const NavBar = () =>{
    return (
<Navbar className="nav-bar" expand="lg" sticky="top">
  <Container>
    <Navbar.Brand href="#home">Scancar</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav"> 
      {/* 普通导航项，位置保持原有不变 */}
      <Nav>    
          <Nav.Link href="find">Find booking</Nav.Link>
          <Nav.Link href="book">Book</Nav.Link>
          <Nav.Link href="pricing">Overview</Nav.Link>
          <Nav.Link href="pricing">Release</Nav.Link>
          <Nav.Link href="pricing">Request</Nav.Link>    
      </Nav>
      {/* 登出项单独包裹，自动填充左侧空白实现右对齐 */}
      <Nav className="ms-auto">
          <Nav.Link href="logOut"> <i className="fas fa-sign-out-alt"></i> </Nav.Link>     
      </Nav>
    </Navbar.Collapse> 
  </Container>
</Navbar>    
    );
}

方案2：给登出项单独加间距

如果不想拆分<Nav>容器，可给外层<Nav>设置宽度100%，再给登出项单独加自动左间距：

<Navbar.Collapse id="basic-navbar-nav"> 
  <Nav className="w-100">    
      <Nav.Link href="find">Find booking</Nav.Link>
      <Nav.Link href="book">Book</Nav.Link>
      <Nav.Link href="pricing">Overview</Nav.Link>
      <Nav.Link href="pricing">Release</Nav.Link>
      <Nav.Link href="pricing">Request</Nav.Link>    
      <Nav.Link href="logOut" className="ms-auto"> <i className="fas fa-sign-out-alt"></i> </Nav.Link>     
  </Nav>
</Navbar.Collapse>

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