bootstrap-4 - Bootstrap 4 : Dropdown menu is not right-aligned when inside nav. 导航栏

Question

截至撰写本文时，最新的 Boostrap 4 和 popper.js 是从 CDN 加载的。

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} 没有帮助)。

问题 .

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

谢谢!

Answer 1

我也没有工作过。但是，我正在使用的一种解决方法是:

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