Question

我正在尝试将“Big Dropdown”菜单显示在导航项目下方。我已经为菜单设置了最大宽度，但我似乎无法正确对齐。我更喜欢一个全面的响应式解决方案＆amp; “最干净”的方法，无需调整所有小东西即可实现这一目标。

绿色框是我希望下拉列表“自然”定位的位置，下拉列表是其当前的错误位置，因此理想的解决方案是如果我要添加更多导航项目并且每个下拉列表将分别放置在他们的导航项目下。

HTML

<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

由于您标记了您正在使用Bootstrap 4，因此实际上有一个内置类来对齐称为dropdown-menu-right的下拉列表。可以在Bootstrap 4文档的Menu alignment section中找到该文档。

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

更新后，可以找到更新的Codepen示例here。

编辑：我forked the Codepen example again并添加了一些Javascript和CSS，将下拉菜单与下拉按钮对齐，而不是屏幕右侧。

Answer 2

添加此款式

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

如何在所选导航项下面对齐引导下拉菜单

2 个答案: