Navbar中的自举程序布局

Question

反正在nav / navbar内部配置布局吗？

我想将3个相同大小的cols分开

我应该是什么样子

这是我的代码

<Navbar fixed="bottom" bg="light" variant="light">
  <Container>
   <Row>
    <Nav>
      <Col sm>
        <Nav.Link href="/communities">Browse Communities</Nav.Link>
      </Col>
      <Col sm >
        <Nav.Link href="/tasks">Tasks</Nav.Link>
      </Col>
      <Col sm>
        <Nav.Link href="/profile">Profile</Nav.Link> 
      </Col>
    </Nav>
   </Row>
  </Container>
</Navbar>

Answer 1

这些列与12列grid system对齐（uses flexbox），因此，如果您希望3列跨越整个网格，则每个列都需要“占用” 4列。

React-Bootstrap Col

<Navbar fixed="bottom" bg="light" variant="light">
  <Container>
   <Row>
    <Nav>
      <Col sm={4}>
        <Nav.Link href="/communities">Browse Communities</Nav.Link>
      </Col>
      <Col sm={4}>
        <Nav.Link href="/tasks">Tasks</Nav.Link>
      </Col>
      <Col sm={4}>
        <Nav.Link href="/profile">Profile</Nav.Link> 
      </Col>
    </Nav>
   </Row>
  </Container>
</Navbar>

Answer 2

Try this way:
<Navbar fixed="bottom" bg="light" variant="light">
  <Container>
   <Row>
    <Nav>
      <Col sm={8}>
        <Nav.Link href="/communities">Browse Communities</Nav.Link>
      </Col>
      <Col sm={8}>
        <Nav.Link href="/tasks">Tasks</Nav.Link>
      </Col>
      <Col sm={8}>
        <Nav.Link href="/profile">Profile</Nav.Link> 
      </Col>
    </Nav>
   </Row>
  </Container>
</Navbar>