css - 如何对齐反应引导导航栏项目？

Question

我将如何设置registered asandlogout按钮使其向右对齐？我尝试justify content在 navbar.text 上使用并将其设置为向右对齐。顺便说一句，父级已经设置为 flex：

<Navbar onToggle={()=>setExpanded(!expanded)} expanded={expanded} bg="primary" variant="dark" expand="lg" fixed="top">
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav>
    <Nav.Link as={Link} to="/" className='header-router-a' onClick={() => setExpanded(false)}>
      Home
    </Nav.Link>
    <Nav.Link as={Link} to="/quiz" className='header-router-a' onClick={() => setExpanded(false)}>
      Personality Quiz
    </Nav.Link>
    <Nav.Link as={Link} to="/shopper" className='header-router-a' onClick={() => setExpanded(false)}>
      Shopper
    </Nav.Link>
    <Nav.Link as={Link} to="/contact" className='header-router-a' onClick={() => setExpanded(false)}>
      Contact
    </Nav.Link>
  </Nav>
  {loggedin ? 
  <Nav>
    <Navbar.Text className="auth"as={Link} to={`/profile/${state.user}`}  onClick={() => setExpanded(false)} >
      Signed in as: {state.user}
    </Navbar.Text >
    <Button onClick = {() => {
      localStorage.removeItem("jwtToken");
      setExpanded(false)
      setAuthToken(false);
      dispatch({
        type: 'SET_CURRENT_USER',
        payload : {}
      });
    }} >
      Log Out 
    </Button>
    </Nav>
    : <Button onClick={() => {history.push("/login"); setExpanded(false)}}>
        LOG IN 
      </Button>
    }
  </Navbar.Collapse>
</Navbar>

.bg-primary{
  background-color: #33DBFF;
  opacity: 0.95;
}

/*not working*/
.auth {
  margin-right: auto;
  justify-content: end;
}

这是目前的样子：

标签： cssflexboxreact-bootstrap

Answer 1

孩子没有正确嵌套！！！！