在 React Bootstrap 中居中对齐 NavItem答案

【问题标题】：Center Align NavItem in React Bootstrap在 React Bootstrap 中居中对齐 NavItem
【发布时间】：2019-07-04 20:20:04
【问题描述】：

我已经在这方面工作了很长时间，但似乎不知道该怎么做。目前，我的 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>

【问题讨论】：

根据documentation 添加这个className="justify-content-center" 它应该可以工作，否则你的css被覆盖了
@Vitorinofernandes 我试过了，但没有成功，我将它添加到 <Nav> 并且我必须外部 css

标签： html css reactjs react-bootstrap

【解决方案1】：

确保在您的导航开始标签中添加 className="justify-content-center"。如果您尝试在 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/

【讨论】：