导航栏中的下拉菜单受 React 导航下拉菜单中导航栏大小的限制 reactstrap

Question

我正在关注这个例子 enter link description here

我的导航栏就像：

 <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>
      Dropdown Test
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem disabled>Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem divider />
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
  </Dropdown>

但是导航栏中的下拉菜单受导航栏大小的限制，它如何覆盖它？

我不想像调整标题 css

ul {
height:10rem 
} 

让它工作，谢谢

编辑我在 jsx 中工作的代码： 太长了，这里上传，

这是我移动到代码和框的代码 enter link description here

谢谢

杰夫

Answer 1

花了一些时间，但想通了。我是对的，问题是 css。我在你的这个分叉项目中解决了这个问题 https://codesandbox.io/s/mystifying-mendeleev-n1709?file=/src/Dashboard.css

reactstrap 依赖于 bootstrap https://reactstrap.github.io/ 只需通过 npm install --save bootstrap 安装 bootstrap 并将其导入主 injex.js 文件 cia import 'bootstrap/dist/css/bootstrap.min.css'; 即可修复大部分问题。

此外，删除了很多您自己编写的 css，因为它们要么 a) 不正确，要么 b) 不再有用。

其他问题

标题高度过高的原因是您在 height: 5rem 元素上使用了 ul。

隐藏下拉菜单的原因是 overflow: hidden 元素上的 ul。