React-bootstrap：具有带有`fill`标志的`Nav`的`NavBar`不能正常工作

Question

正如标题所述，我希望我的NavBar扩展整个可用宽度，因此我向fill组件中的Nav添加了NavBar标志。

  <Navbar bg="light" expand="lg">
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav fill className="mr-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/news">News</Nav.Link>
          <Nav.Link href="/ship-schedule">Ship Schedule</Nav.Link>
          <Nav.Link href="/media-sponsor">Media Sponsor</Nav.Link>
          <Nav.Link href="/contacts">Contacts</Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

但是它不起作用，Nav.Link组件仍然保持对齐。

如何使那些Nav.Link组件填充Nav.Bar组件的宽度。

Answer 1

也许在Nav.Item下，每个Nav.Link外面需要一层Nav

参考官方文件：fill-and-justify

更改此

<Nav fill ...>
  <Nav.Link ...> ... </Nav.Link>

收件人

<Nav fill ...>
  <Nav.Item>
    <Nav.Link ...>...</Nav.Link>
  </Nav.Item>