导航栏中的 Bootstrap (4.0) 下拉菜单不能相对于视口定位正确答案

【问题标题】：Bootstrap (4.0) dropdown in navbar cannot position right in relation to viewport导航栏中的 Bootstrap (4.0) 下拉菜单不能相对于视口定位正确
【发布时间】：2018-04-04 11:06:35
【问题描述】：

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

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

如果可能的话，我希望能够使用引导类来达到预期的效果。可能我需要添加一些自定义样式，因为菜单是可折叠的，它将下拉触发链接按钮推到左侧。在这种情况下，我希望下拉菜单仍然在视口右侧打开。有兴趣了解为什么下拉菜单权利根本不起作用？谢谢！

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

下拉父级应该在导航栏中有 .navbar-nav 才能正常工作，因为它写在这里：https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

【讨论】：