有没有办法使导航栏下拉菜单在折叠的导航栏下方扩展？

Question

我正在尝试创建一个带有下拉菜单的react-bootstrap导航栏，该菜单会在折叠时保持显示状态。换句话说，basic-nav-dropdown不会像下面的home和link那样隐藏。我已通过以下步骤完成了此操作，但是导航栏折叠时下拉菜单存在问题。

<Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Nav className="mr-auto">
    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
    </NavDropdown>
</Nav>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#link">Link</Nav.Link>
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search" className="mr-sm-2" />
      <Button variant="outline-success">Search</Button>
    </Form>
  </Navbar.Collapse>
</Navbar>

这是打开下拉列表并展开导航栏时的外观。下拉列表显示导航栏下方的结果，并且该结果不会影响导航栏的显示。这是预期的。

这是打开下拉列表并折叠导航栏时发生的情况。 下拉菜单不低于导航栏，而是展开导航栏。我希望下拉菜单的行为与展开导航栏时的行为相同。

是否有办法使导航栏下拉菜单扩展到下方折叠的导航栏？

我还尝试删除了<Nav className="mr-auto/>周围的<NavDropDown>，尽管确实解决了该问题，但由于navdropdown链接的格式与home和{{ 1}}，并且还与中心对齐，而不是像以前那样向左对齐。

Answer 1

这是react-bootstrap的默认行为，当Navbar为collapsed并包含Dropdown时，它仅在后面跟随{{1 }}，

Navbar

您只需更改CSS即可获得所需的输出，

.navbar-nav .dropdown-menu {
    position: static;
    float: none;
}

Demo