如何使 Bootstrap 下拉菜单尊重移动设备上的水平视口限制？

Question

Bootstrap 类dropdown-menu可以自动检测屏幕的视口并进行相应的调整

因此，如果下拉菜单没有空间打开到底部，它会打开，如下面的示例所示

但是对于视口的水平限制不会发生这种情况，我最终得到了这个水平滚动，这是发生这种情况的一个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="bd-example">

  <div class="btn-group">

    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>

    <div class="dropdown-menu">

      <a class="dropdown-item" href="#">Action</a>

      <a class="dropdown-item" href="#">Another action</a>

      <a class="dropdown-item" href="#">Something else here</a>

      <div class="dropdown-divider"></div>

      <a class="dropdown-item" href="#">Separated link</a>

    </div>

  </div><!-- /btn-group -->

  <div class="btn-group">

    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>

    <div class="dropdown-menu">

      <a class="dropdown-item" href="#">Action</a>

      <a class="dropdown-item" href="#">Another action</a>

      <a class="dropdown-item" href="#">Something else here</a>

      <div class="dropdown-divider"></div>

      <a class="dropdown-item" href="#">Separated link</a>

    </div>