在 Bootstrap4 的模式中滚动下拉列表答案

【问题标题】：Scrolling a dropdown in a modal in Bootstrap4在 Bootstrap4 的模式中滚动下拉列表
【发布时间】：2018-03-08 08:25:59
【问题描述】：

我目前正在从 Bootstrap4 alpha 迁移到 Bootstrap4 stable。到目前为止，一切都很好，除了我在模态中遇到的这个问题。我到处都在使用下拉菜单，包括有很多项目的下拉菜单。以前，滚动工作得很好。现在它没有了：当我滚动时，这是正在滚动的模态过滤器 (.modal-backdrop)，而不是下拉列表。

这是一个完整的页面示例：

https://www.codeply.com/go/JKlWFeOgtU

【问题讨论】：

标签： bootstrap-4 popper.js

【解决方案1】：

另一种解决方法是在下拉列表中设置一个空的data-boundary...

https://codeply.com/go/X8QPbNtp1E

<div class="btn-group dropdown">
      <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" data-boundary="">Dropdown</button>
      <div class="dropdown-menu mt-5">
        <a class="dropdown-item" href="#">Action</a>
                        ...
      </div> 
</div>

【讨论】：

【解决方案2】：

我找到了解决方法。

问题来自于 bootstrap 3 所没有的 popper.js。一件有趣的事情是 popper.js 忽略了带有“.navbar”类的下拉菜单（即 Bootstrap 不会用它们制作弹出对象），所以我刚刚在“.dropdown”旁边添加了“.navbar”类，加上 "style="padding: 0 0" 以获得全角下拉切换按钮。

https://www.codeply.com/go/lEvHHZz4Zu

【讨论】：