Question

我在导航栏中有一个导航栏和一个链接btn。链接btn触发下拉列表。我希望固定到视口右侧的下拉列表打开。当下拉列表打开时，它当前隐藏在视口右侧之外的一半。即使将下拉菜单权限类添加到下拉菜单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>

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

Answer 1

下拉父级应该在导航栏中包含 .navbar-nav ，以便在此处正确处理：https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

导航栏中的Bootstrap（4.0）下拉列表无法相对于视口

1 个答案: