下拉菜单未在导航栏中正确显示

Question

我使用bootstrap 4

我创建了一个带有下拉菜单部分的导航栏。

在这里演示

http://jsfiddle.net/hja1dj2j/3/

<ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span>admin</span>
                        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a href="/menu/changepassword" class="dropdown-item" role="menuitem">Changer de mot de passe</a>

          <a href="javascript: document.logoutForm.submit()" class="dropdown-item" role="menuitem">Déconnexion</a>
          <form name="logoutForm" action="/logout" method="post" hidden="hidden">
            <input hidden type="submit" value="Sign Out" />
          </form>

        </div>
      </li>
    </ul>

问题的图像

当我点击下拉菜单时，我们看到无法正确显示。

有什么想法吗？