Bootstrap模态框中隐藏的下拉菜单

Question

我正在使用带有多个下拉菜单的Bootstrap模态框，由于一堆东西，我设置了overflow：auto CSS属性，在模态框中有一个滚动条。

问题是，当我打开任何一个下拉菜单时，它不会出现在模态框之外（由于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上工作的示例 提前致谢。

- Kamran Khatti

---

你不是已经问过这个问题了吗？https://stackoverflow.com/questions/48930012/dropdown-opens-under-modal-css-issue - Carol Skelly

是的，但这次我提供了更多细节，还有一个在JSFiddle上的示例。 - Kamran Khatti

好的，但是您应该编辑/改进现有问题。 - Carol Skelly

但是他没有回答。 - Kamran Khatti

是的，如果有人阅读了问题，并不意味着他知道答案 ;) - Red

Answer 1

您可以这样做，但这样会破坏 Bootstrap 的响应式设计。

将 position: relative; 重置为其初始的 position: static;

.modal-body,
.modal-body .dropdown {
   position: static;
}

问题在于下拉框不知道应该处于哪个位置。因此您需要自行进行定位。

.modal-body .dropdown-menu {
  top: 100px;
  left: 20px;
}

我不建议使用这种解决方案，最好还是按照Bootstrap处理元素的方式来做。

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

.modal-body,
.modal-body .dropdown {
  position: static !important;
}

.modal-body .dropdown-menu {
  top: 100px;
  left: 20px;
}

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="dropdown">
          <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
            Dropdown <span class="caret"></span>
          </a>
        <br>

          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li>one</li>
            <li>two</li>
            <li>three</li>
            <li>four</li>
            <li>five</li>
            <li>six</li>
            <li>seven</li>
            <li>eight</li>
          </ul>
          
           
        </div>
      </div>



      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

- Red

Answer 2

升级bootstrap从3.x到4.x后，这个问题已经得到解决，现在bootstrap 4能够直接处理所有这些边缘情况。

- Kamran Khatti

---

https://github.com/twbs/bootstrap/issues/28513（在v5.2.2中仍然存在） - Thomas

当我们在modal-body中添加overflow:auto时，它仍然无法正常工作。 - Bagrat Zakaryan