如何将 Bootstrap react Header 中的 Nav.Link 移动到右侧？

Question

大家好，我正在尝试使用 React Bootstrap 为我的网页应用程序制作标题，但我无法将徽标与 Nav.link 分开（它们都放在左侧），但我想要徽标位于左侧，同时另一个 Nav.link 位于右侧。在正常的引导中，我们只需要在列表中添加 justify-content-end 但是对于 React Bootstrap 它不起作用，有人可以帮我解决这个问题吗？

这是我的代码：

import '../styles/Header.css'
import { Navbar, Nav } from "react-bootstrap"
import { Link } from 'react-router-dom'

function header() {
    return (
        <Navbar className="color-nav" variant="dark" expand="lg">
            <Navbar.Brand as={Link} to={"/"}>Logo will be Here</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="justify-content-end">
                    <Nav.Link as={Link} to={"/facilities"}>Facilities</Nav.Link>
                    <Nav.Link as={Link} to={"/room"}>Room</Nav.Link>
                    <Nav.Link as={Link} to={"/contactus"}>Contact Us</Nav.Link>
                    <Nav.Link as={Link} to={"/bookingroom"}>Book now</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default header

Answer 1

您忘记添加 display flex ，所以没有它就不是 flexbox 。添加 d-flex ，希望会起作用。