有没有办法让导航栏下拉菜单在折叠的导航栏下方展开？答案

【问题标题】：Is there a way to make the navbar dropdown expand below a collapsed navbar?有没有办法让导航栏下拉菜单在折叠的导航栏下方展开？
【发布时间】：2019-11-22 17:32:33
【问题描述】：

我正在尝试创建一个带有下拉菜单的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>

这是打开下拉菜单并展开导航栏时的样子。下拉菜单在导航栏下方显示结果，结果不会影响导航栏的显示。这是意料之中的。

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

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

我还尝试删除 <NavDropDown> 周围的 <Nav className="mr-auto/>，虽然这确实解决了问题，但它引入了新问题，因为导航下拉链接的格式与 home 和 link 的格式不同，并且也与中心，而不是像以前那样向左。

【问题讨论】：

标签： css reactjs bootstrap-4 react-bootstrap

【解决方案1】：

这是react-bootstrap 的默认行为，当Navbar 为collapsed 并包含Dropdown 时，它将在Navbar 中扩展，仅在CSS 之后，

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

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

.navbar-nav .dropdown-menu {
    position: absolute;
}

Demo

【讨论】：