如何对齐左导航栏 React-Bootstrap

Question

我的导航代码为：-

    const Navigation = (props) => {
    console.log(props);
    return (
        <Navbar bg="primary" variant="dark">
            <Navbar.Brand href="/">Dating Service</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                    <Nav.Link href="/">Home</Nav.Link>
                    <Nav.Link href="/CreateProfile">Create Profile</Nav.Link>
                    <Nav.Link href="/ViewProfile">View Profile</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default withRouter(Navigation);

看起来像这样：-

整个页面居中对齐。如何让它左对齐？

Answer 1

我可以这样解决它：-

npm install bootstrap

稍后添加import 'bootstrap/dist/css/bootstrap.min.css';

另外，我们可以直接在 public/index.html 中包含 bootstrap.min.css cdn 而无需安装 bootstrap。