bootstrap-4 – Bootstrap 4：当在nav.navbar中时,下拉菜单没有右对齐

Codepen here.

问题.

我的下拉代码：

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">This dropdown's menu is right-aligned</button>
    <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
    </div>
</div>

我把它放在里面< nav class =“navbar”>它是正确的：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div class="btn-group ml-auto">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Welcome</button>
        <div class="dropdown-menu dropdown-menu-right">
            <button class="dropdown-item" type="button">Action</button>
            <button class="dropdown-item" type="button">Another action</button>
            <button class="dropdown-item" type="button">Something else here</button>
        </div>
    </div>
  </div>
</nav>

问题是,当您单击“欢迎”时,下拉菜单会出现在屏幕的右边缘之外,尽管下拉菜单右侧是类.

提议的解决方案here不起作用({margin：0}没有帮助).

题.

如何确保下拉不会超出屏幕的右边缘？

谢谢！

.dropdown-menu-right {
    right:0;
    left:auto;
}