如何在我的 React Bootstrap NavBar 中右对齐链接？

Question

我在对齐 Bootstrap NavBar 中的“登录”链接时遇到了一些问题。这是 NavBar 的以下代码：

import React, { Component } from 'react';
import {Navbar, Nav, Container, NavDropdown} from 'react-bootstrap';
import restorifyLogo from '../Images/restorify-logo.png';

class NavbarComp extends Component {
  render() {
    return (
      <div>
              <Navbar className="planted-navbar" variant="dark" expand="lg">
                <Container className="navbar-container">
                  <Navbar.Toggle aria-controls="basic-navbar-nav" />
                  <Navbar.Collapse id="planted-navbar-collapse">
                    <Nav className="ml-auto">
                      <Navbar.Brand href="#home">
                      <img
                        src={restorifyLogo}
                        width="243px"
                        height="70px"
                        className="d-inline-block align-top"
                        alt="Restorify logo"
                      />{''}
                    </Navbar.Brand>
                      <NavDropdown title="Missions" id="missions-dropdown">
                        <NavDropdown.Item href="county-select">Missions Map</NavDropdown.Item>
                        <NavDropdown.Item href="current-missions">Current Missions</NavDropdown.Item>
                        <NavDropdown.Item href="completed-missions">Completed Missions</NavDropdown.Item>
                        <NavDropdown.Item href="start-mission">Start a Mission</NavDropdown.Item>
                      </NavDropdown>
                      <NavDropdown title="Trees" id="trees-dropdown">
                        <NavDropdown.Item href="my-trees">My Trees</NavDropdown.Item>
                        <NavDropdown.Item href="all-trees">Explore Trees</NavDropdown.Item>
                      </NavDropdown>
                      <Nav.Link href="about" id="about-link">About</Nav.Link>
                      <Nav.Link className="justify-content-end" href="login" id="login-link">Login</Nav.Link>
                    </Nav>
                  </Navbar.Collapse>
                </Container>
              </Navbar>
      </div>
    );
  }
}

export default NavbarComp;

我正在使用 Bootstrap v5.2.2。下面你可以看到 NavBar 的截图。

Answer 1

一个解决方案可能是这样的：

<Nav className="ms-auto">

这对我有用。

Answer 2

我的解决方案：

在 NavbarComp.tsx 中，我将帐户链接放在它们自己的 div 元素中。

<div className='account-links'>
     <Nav.Link className="justify-content-end" href="profile" id="profile-link">{currentUser.Username}</Nav.Link>
     <Nav.Link className="justify-content-end" href="/login" id="logout-link" onClick={this.logOut}>LogOut</Nav.Link>
</div>

在 css 中，我给 div 设置了以下样式：

  .account-links {
    display: flex;
    margin-left: auto;
    color: white;
  }

Answer 3

你一定要试试这个

当我为我的一个客户工作时，它起作用了。我读了你的代码场景，它几乎和我的一样。