将 React Bootstrap Navbar 下拉列表拆分为列 |反应 Js

Question

我想用结果创建第二列，这样流派选项卡就不会那么长了。有没有一种方法可以创建列数或容器来实现此目的？

这是目前我的 App.js

function App() {
  return (
    <div>
      <Navbar bg="light" expand="lg">
        <Container fluid>
          <Navbar.Brand >  
            <FontAwesomeIcon icon={faHeart} size="xl" beat pull="left"/>      
            <FontAwesomeIcon icon={faVideo} size="lg" />  
          </Navbar.Brand>

        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">

          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">New </Nav.Link>
            <Nav.Link href="#link">Leaving Soon</Nav.Link>
            <NavDropdown title="Genre" id="basic-nav-dropdown">
            <NavDropdown.Item href="genre/action">Action</NavDropdown.Item>
            <NavDropdown.Item href="genre/adventure">Adventure</NavDropdown.Item>
            <NavDropdown.Item href="genre/animation">Animation</NavDropdown.Item>
            <NavDropdown.Item href="genre/biography">Biography</NavDropdown.Item>
            <NavDropdown.Item href="genre/comedy">Comedy</NavDropdown.Item>
            <NavDropdown.Item href="genre/crime">Crime</NavDropdown.Item>
            <NavDropdown.Item href="genre/documentary">Documentary</NavDropdown.Item>
            <NavDropdown.Item href="genre/drama">Drama</NavDropdown.Item>
            <NavDropdown.Item href="genre/family">Family</NavDropdown.Item>
            <NavDropdown.Item href="genre/fantasy">Fantasy</NavDropdown.Item>
            <NavDropdown.Item href="genre/history">History</NavDropdown.Item>
            <NavDropdown.Item href="genre/horror">Horror</NavDropdown.Item>
            <NavDropdown.Item href="genre/musicals">Musicals</NavDropdown.Item>
            <NavDropdown.Item href="genre/mystery">Mystery</NavDropdown.Item>
            <NavDropdown.Item href="genre/romance">Romance</NavDropdown.Item>
            <NavDropdown.Item href="genre/scifi">Sci-Fi</NavDropdown.Item>
            <NavDropdown.Item href="genre/sport">Sport</NavDropdown.Item>
            <NavDropdown.Item href="genre/thriller">Thriller</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Missing Something?</NavDropdown.Item>
            </NavDropdown>
          </Nav>

        <Container center>
          <Nav>
            <Form className="d-flex">
              <Form.Control
              type="search"
              placeholder="Search"
              className="me-2"
              aria-label="Search"
              />
              <Button variant="outline-success">Search</Button>
            </Form>
          </Nav>
        </Container>

        <Nav>
          <Nav.Link href="#list">My List</Nav.Link>
          <Nav.Link href="#settings">Settings</Nav.Link>
        </Nav>
      </Navbar.Collapse>
      </Container>
      </Navbar>
    <Footer/>
  </div>
  );
}

我确定这是一个简单的 css 技巧，因为我知道他们有一个容器计数属性，但我不确定如何实现它。