Bootstrap 4:当在nav.navbar中时,下拉菜单没有右对齐

Question

从CDN加载最新的Boostrap 4和popper.js.

Codepen在这里.

问题.

我的下拉代码:

<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>

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

这里提出的解决方案不起作用({margin:0}没有帮助).

问题.

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

谢谢!

Answer 1

这是一个相当粗糙但完全有效的解决方案来解决您的问题。

.dropdown-menu-right{
    left: -85px;
}

编辑：我将其放入媒体查询中，以便下拉列表在移动设备上看起来不会消失。

@media screen and (min-width: 991px) {
  .dropdown-menu-right{
    left: -85px;
  }
}