下拉菜单隐藏在 Bootstrap 模式中

Question

我正在使用带有几个下拉菜单的 Bootstrap 模态，因为我将overflow: autoCSS 属性设置为在模态中有一个滚动条。

问题是当我打开任何下拉菜单时，它不会出现在模态之外（由于该 CSS 属性overflow: auto），它隐藏在模态下（见图）。

我想从该模式中显示该下拉菜单，我尝试了所有方法z-index: 999999; position: absolute等，但似乎不起作用。

我用谷歌搜索，我找到的所有解决方案都是删除该overflow: auto属性并放置，overflow:visible但正如我所提到的，由于一堆下拉列表（大约 150 个），我必须放置滚动条以防止溢出，否则模态高度会使页面变得混乱。

CSS（强制）

.modal-body {
  max-height: 100px;
  overflow: auto;
} 

简单的解决方案是你只需将它替换overflow:auto为visible它就可以了，但我需要保持overflow:auto;

这是JSFiddle上的工作示例

提前致谢。

Answer 1

3.x在将 bootstrap 从 升级到后，此问题已得到解决4.x，现在 bootstrap 4 可以开箱即用地处理所有这些边缘情况。