隐藏在 Bootstrap 模式中的下拉菜单

Posted 2023-05-08

【中文标题】隐藏在 Bootstrap 模式中的下拉菜单

【英文标题】：Dropdown Hidden Inside Bootstrap Modal

【发布时间】：2018-08-03 13:18:44

【问题描述】：

我正在使用 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 上的工作示例

提前致谢。

【问题讨论】：

你不是已经问过这个了吗？ ***.com/questions/48930012/…

是的，但这次我想出了更多细节，也是 JSFiddle 上的一个例子

好的，但您应该编辑/改进现有问题

老大哥在看着你！ @ZimSystem

是的，我喜欢你的 cmets。因为你在 1 天里遇到了他的两个问题，这很有趣。哈哈

【参考方案1】：

您可以做到这一点，但不能不破坏引导程序响应能力。

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

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

它的问题是下拉列表不知道它应该在哪个位置。所以你必须自己定位

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

我不推荐这个解决方案，但只要坚持引导程序处理元素的方式。

.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 -->

【参考方案2】：

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