Twitter bootstrap 导航栏中的引导（4.0）下拉列表无法相对于视口正确定位

我有一个导航栏和一个链接btn在导航栏中浮动。链接btn触发下拉列表。我希望下拉列表固定在视口右侧打开。当下拉列表打开时，它当前在视口右侧之外半隐藏。即使在下拉菜单div中添加了下拉菜单right类

<div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="btn btn-primary align-middle" href="/Home">Home</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-default align-middle" href="#link1">link1</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-default align-middle" href="#link2">link2</a>
            </li>
            <li class="nav-item">
                <a class="btn btn-default align-middle" href="#link3">link3</a>
            </li>
        </ul>
        <div class="form-inline my-2 my-lg-0">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Try it free</button>
            <span>&nbsp; or &nbsp;</span>
            <div class="dropdown">
                <a class="text-primary btn-link btn" href="#" id="loginMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-shield" aria-hidden="true"></span> Login</a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="loginMenu">
                    <form class="px-4 py-3">
                        <div class="form-group">
                            <label for="exampleDropdownFormEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
                        </div>
                        <div class="form-group">
                            <label for="exampleDropdownFormPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input">
                                Remember me
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Sign in</button>
                    </form>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">New around here? Sign up</a>
                    <a class="dropdown-item" href="#">Forgot password?</a>
                </div>
            </div>
        </div>
    </div>

免费试用
或
电子邮件地址
密码
记得我吗
登录

---

如果可能的话，我希望能够使用引导类来实现期望的效果。可能我需要添加一些自定义样式，因为菜单是可折叠的，将下拉触发链接按钮推到左侧。在这种情况下，我希望下拉列表仍处于打开状态，位于视口右侧。想知道为什么右下拉菜单根本不起作用吗？谢谢

下拉列表父项应在导航栏中具有.navbar nav，以便按此处所述正确工作：