react 환경에서 bootstrap navbar 양쪽 정렬

이거 해결하느라 2시간은 족히 걸린 것 같다. 

입 밖으로 육두문자를 내뱉으며 실랑이한 결과 드디어 해결했다...

초보라서 죽겠습니다, 정말.....

<Navbar bg="light" variant="light">
            <Container>
                <Navbar.Brand href="/"className={styles.title}>타이틀</Navbar.Brand>
                <Nav className="me-auto">
                    <Nav.Link href="/series">메뉴</Nav.Link>
                    <Nav.Link href="/">메뉴2</Nav.Link>
                </Nav>
                <Nav className="ml-auto">
                    <Button className={styles.buttonStyle} variant="outline-secondary">로그인</Button>
                    <Button className={styles.buttonStyle} variant="secondary">회원가입</Button>
                </Nav>
            </Container>
        </Navbar>

주목해야할 곳은 Nav className = "me-auto" (왼쪽 정렬 해줌)

Nav className ="ml-auto" (오른쪽 정렬 해줌)

 

구글링으로 찾아봐도 없길래 마구잡이로 해보니까 성공했다.

이게 맞는 방법인지는 모르겠지만... 후련하다