问题:

I'm currently migrating from Bootstrap4 alpha to Bootstrap4 stable. So far, so good, except this problem I have with my modals. I'm using dropdowns everywhere, including ones with many items. Previously, the scrolling was working perfectly. Now it does not: when I scroll, this is the modal filter (.modal-backdrop) that is scrolling, and not the dropdown's list.

Here is a full page example:

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

回答1:

Another workaround is to set an empty data-boundary on the dropdown...

https://www.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:

I've found a workaround.

The problem comes from popper.js, which Bootstrap 3 didn't have. One interesting thing is that dropdowns with the ".navbar" class are ignored by popper.js (i.e. Bootstrap does not make a popper object out of them), so I've just added ".navbar" next to the ".dropdown" class, plus "style="padding: 0 0" to have a full-width dropdown toggle button.

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