Question

我已经有很长一段时间了，似乎无法解决该怎么做。此刻，我的导航栏中的NavItem位于左侧。我希望他们居中。我尝试在这里https://react-bootstrap.github.io/components/navs/阅读文档，但是它不起作用

这是我的导航栏：

<div className="container">
                    <Navbar collapseOnSelect>
                        <Navbar.Collapse>
                        <Nav  variant="tabs" defaultActiveKey="/home">
                            <NavItem>
                                <NavLink to="/newSite/details">Details</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink to="/newSite/tours">Tours</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink to="/newSite/pois">POIs</NavLink>
                            </NavItem>
                        </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>

Answer 1

在Navbar组件中，可以添加具有以下属性的className或style：

margin: 0 auto;
width: 320px;

不幸的是，width会根据各个制表符的长度而有所不同。

工作示例：https://codesandbox.io/s/xr8kn5074p

Answer 2

确保在Nav开头标记中添加className =“ justify-content-center”。如果要在Navbar和Navbar.Collapse中将Nav项居中，请使用flex添加内嵌样式：1。

<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
   <Nav className="justify-content-center" style={{ flex: 1}}>
     <Nav.Item>
        <Nav.Link href="/home">Home</Nav.Link>
     </Nav.Item>
     <Nav.Item>
        <Nav.Link href="/home">Collection</Nav.Link>
     </Nav.Item>
     <Nav.Item>
        <Nav.Link href="/home">Contact</Nav.Link>
     </Nav.Item>
     <Nav.Item>
        <Nav.Link href="/home">Blog</Nav.Link>
     </Nav.Item>
   </Nav>
</Navbar.Collapse>
</Navbar>

查看React Bootstrap文档中的“对齐和方向”部分。 -https://react-bootstrap.github.io/components/navs/

在React Bootstrap中居中对齐NavItem

2 个答案: