在 Bootstrap4 的模态中滚动下拉菜单

Question

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

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

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

Answer 1

我找到了解决方法。

问题来自 popper.js，Bootstrap 3 没有。一件有趣的事情是带有“.navbar”class 的下拉菜单被 popper.js 忽略（即 Bootstrap 不会从中创建一个 popper 对象），所以我刚刚添加了“ .navbar" 旁边的 ".dropdown" class，加上 "style="padding: 0 0" 有一个 full-width 下拉切换按钮。

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

Answer 2

另一种解决方法是在下拉菜单中设置一个空 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>

在 Bootstrap4 的模态中滚动下拉菜单

Scrolling a dropdown in a modal in Bootstrap4

bootstrap-4

popper.js