如何对齐左侧的Navbar React-Bootstrap [英] How to align left Navbar React-Bootstrap

问题描述

我的导航代码为:-

    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);

它看起来像这样:-

整个页面居中对齐.如何使其对齐?

The whole page is aligned center. How can make it left aligned?

推荐答案

我可以通过以下方法对其进行修复:-

I could fix it by this:-

npm install bootstrap

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

此外，有可能我们可以直接在公共目录/index.html中包含bootstrap.min.css cdn，而无需安装bootstrap.

Also, it is possible that we can include bootstrap.min.css cdn directly at public/index.html without installing bootstrap.

这篇关于如何对齐左侧的Navbar React-Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！