如何对齐所选nav项下的引导下拉菜单

Question

我正在尝试使“大下拉”菜单显示在导航项目的正下方。我已经为菜单设置了最大宽度，但我似乎无法使它正确地对齐。我更喜欢一个全响应的解决方案&“最干净”的方式来实现这一点，而不必调整所有的小事情。

绿框是我希望下拉的位置是“自然”的位置，下拉是它目前的错误位置，所以理想的解决方案是我添加更多的导航项目，每个下拉分别放在他们的导航项目下。

​

​

<li class="nav-item dropdown position-static">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" 
    id="navbarDropdown" role="button">Big Dropdown</a>
    <ul class="dropdown-menu megamenu midmenu ">
        <div class="row">
            <li class="col-md-6">
                <ul>
                    <h6 class="list-header">List Header</h6>
                    <hr>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                </ul>
            </li>
            <li class="col-md-6">
                <ul>
                    <h6 class="list-header">List Header</h6>
                    <hr>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                    <li>
                        <a href="#">Lorem Ipsum</a>
                    </li>
                </ul>
           </li>
        </div>
    </ul>
</li>

CSS

nav.main .megamenu {
    padding: 20px 20px;
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    max-width: 1500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

nav.main .midmenu {
    position: absolute;
    padding: 20px 20px;
    float: left;
    top: auto;
    left: auto;
    right: auto;
    max-width: 650px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

Codepen --请看“大下垂”

https://codepen.io/GH5ST/pen/GGgWPK

Answer 1

由于您标记了您正在使用的引导带4，实际上有一个内置类来正确地对齐下拉列表，称为dropdown-menu-right。这些文档可以在Bootstrap 4文档的菜单对齐部分中找到。

注意，由于您使用的是导航菜单，这将使下拉菜单对齐页面的右侧，而不是下拉按钮的右侧。

更新的是更新后的代码示例，可以找到这里。

编辑:我再次分叉了Codepen示例和添加了一些Javascript和CSS在右边对齐下拉菜单与下拉按钮，而不是右边的屏幕。

Answer 2

添加此样式

.dropdown-menu.megamenu.midmenu.show {
    right: 0;
  }
  .dropdown-menu.show {
    right: 0;
  }