有没有办法让导航栏下拉菜单在折叠的导航栏下方展开？
想象者那
我正在尝试创建一个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 链接的格式与homeand 不同link，并且还与中心对齐，而不是像以前那样向左对齐。
拉维巴古尔91
这是默认行为react-bootstrap，当Navbariscollapsed和 contains时，Dropdown它只会在Navbar以下情况下扩展CSS，
.navbar-nav .dropdown-menu {
position: static;
float: none;
}
您只需更改CSS即可获得所需的输出，
.navbar-nav .dropdown-menu {
position: absolute;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
带有下拉菜单的Bootstrap不可折叠导航栏
- 2
带有下拉菜单的yii2导航栏
- 3
离子导航栏下拉菜单
- 4
应用引导程序后，导航栏的下拉菜单在流星中不起作用
- 5
有没有办法在ng2-bootstrap中构建移动导航栏？
- 6
Bootstrap的导航栏下拉菜单在自定义断点以下无法正确打开
- 7
如何防止导航栏在单击具有下拉菜单的特定菜单项时隐藏/折叠？
- 8
有没有办法使导航栏徽标具有响应性？
- 9
导航栏中的下拉菜单
- 10
为什么下拉菜单在bootstrap5导航栏中不起作用？
- 11
引导导航栏下拉菜单
- 12
Bootstrap默认导航栏下拉菜单在折叠模式下具有透明背景吗？
- 13
侧面导航栏下拉菜单
- 14
CSS下拉菜单导航栏
- 15
从导航栏HTML CSS的下拉菜单中没有任何内容
- 16
使导航栏的下拉菜单停留
- 17
带有固定导航栏的下拉菜单
- 18
让 Bootstrap 下拉菜单在导航栏中正确显示
- 19
Html 导航栏下拉菜单
- 20
在现有导航栏中创建下拉菜单
- 21
导航栏下拉菜单在 bootstrap4.0 中不起作用
- 22
Bootstrap 4.0.0 右对齐导航栏下拉菜单在打开时超出视口
- 23
使用 BootStrap-4 导航栏的多级下拉菜单在下拉菜单时超出屏幕
- 24
有没有办法把我的导航栏放在所有东西的前面？
- 25
有没有办法在侧边栏中添加主导航的一部分？
- 26
下拉菜单没有延伸到导航栏下方，只是替换了原始链接
- 27
有没有办法在地图上的反应传单中显示下拉菜单
- 28
有没有办法禁用嵌入在导航栏（navigationItem.leftBarButtonItem）中的按钮的用户交互？
- 29
导航下拉菜单在悬停时显示在导航栏上方
我来说两句