大家好,所以我正在尝试使用 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