我正在使用 Bootstrap 4 制作导航菜单。需要将一些nav-item 元素放置在navbar 的右边缘，而其中最右边有一个下拉菜单。
问题是下拉菜单的宽度明显大于导航项的宽度，并且不知何故不依赖于菜单列表中文本的宽度。因此，列表在打开时会超出浏览器的边缘。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
<!-- Brand -->
<a class="navbar-brand" href="/">App Name</a>
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/home">Home</a>
</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">User Name <span class="caret"></span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/logout">Logout</a>
</div>
</li>
</ul>
</nav>要重现上述代码段中的问题，您需要执行它，然后单击“整页”按钮。它在小屏幕上的工作方式不同，并且此特定问题仅在桌面上重现。
我试图将它移出<div class="dropdown-menu">parent <li>，希望列表会从浏览器的右边缘被击退。但在这种情况下，列表根本不会打开。
可在 Chrome 和 Safari 中播放。
Chrome：版本 64.0.3282.186（官方构建）
Safari：版本 10.1.2 (12603.3.8)
