html - 在 React Bootstrap 中居中对齐 NavItem

Question

我从事此工作已有多年，但似乎无法弄清楚该怎么做。目前，我的 NavBar 中的 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

确保在导航开始标记中添加 className="justify-content-center"。如果您尝试将 Nav Items 置于 Navbar 和 Navbar.Collapse 的中心，请使用 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/