屏幕上的Bootstrap 4导航栏下拉列表

Question

我无法让它发挥作用。 在我的应用程序中，我有一个带有下拉菜单的导航栏。在大屏幕上正常工作，但如果我在移动设备或平板电脑上访问它，则下拉列表会从屏幕上移除。

以下是它在移动设备上的显示效果：

以下是它在平板电脑尺寸上的外观：

以下是导航的代码：

<nav class="navbar navbar-expand-md navbar-dark">
        <div class="container">
          <a class="navbar-brand" href="#">
            <!--<img src="assets/img/logo.png" alt="logo"/>-->
            <h2 class="title">Sced</h2>
          </a>

        <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown dropdown-menu-right">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img class="avatar" src="assets/img/avatar.jpg">
              <span class="user">Gijs Min</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>