如何强制 bootstrap 下拉菜单定位到另一个元素

Question

我正在使用 Bootstrap 4 个下拉菜单构建一个大型菜单。容器不是流体。如何强制每个下拉菜单的位置和样式都占据容器的整个宽度？与触发它的 link/button 的位置无关。

因此，在我的菜单导航项水平列表中，无论触发元素的位置如何，每个下拉菜单的宽度都相同，并且从相同的左侧位置开始。下拉框的左侧位置应该是容器的左侧位置（不是触发按钮），下拉框的宽度应该是容器的全宽，而不是主体的全宽。

顺便说一句，我在这里制作原型，所以完全可以快速破解。

Answer 1

之所以点击下拉菜单会出现在触发元素的正下方，是因为触发元素是相对定位的，而下拉菜单是绝对定位的，100% top 0 left，会推动下拉菜单向下并将其左侧与触发元素对齐。

假设我们有一个名为 .mega-menu 的 class，它将常规下拉菜单转换为大型菜单，并且我们有如下结构：

<li class="nav-item dropdown mega-menu">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
        Dropdown 2
    </a>
    <div class="dropdown-menu">
        <div class="container-fluid">
            <div class="row flex-grow-1">
                <div class="col-md-6">
                    <div class="jumbotron">
                        <h2>
                            Hello World!
                        </h2>
                        <p>
                            Welcome to our mega menu!
                        </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <h3>
                        Feature 1
                    </h3>
                </div>
            </div>
        </div>
    </div>
</li>

如果你想让下拉菜单与容器对齐并占据它的整个宽度，你需要做的第一件事就是去掉触发元素上的相对定位，这样下拉菜单就不会'不要限制在触发元素下。

你可能想知道如果它不再有相对父级，它从哪里是绝对的。幸运的是，一直到导航栏，<nav class="navbar" /> 都有相对定位！太完美了！

.dropdown.mega-menu, 
.dropleft.mega-menu, 
.dropright.mega-menu, 
.dropup.mega-menu {
    position: static;
}

然后唯一剩下的就是将下拉菜单的左侧和右侧设置为0，以便它与容器对齐。为了让它看起来更好看，你可以有一个负 margin-top 这样菜单的顶部边框将合并到导航栏中：

.dropdown.mega-menu, 
.dropleft.mega-menu, 
.dropright.mega-menu, 
.dropup.mega-menu {
    position: static;
}

.mega-menu .dropdown-menu {
    left: 0;
    right: 0;
    margin-top: -1px;
}

超级菜单应该可以使用了！

如果你想把 .container-fluid 放在超级菜单中，你还需要做一件事：把 flex-grow-1 或 w-100 放在那里的任何一行：

<div class="dropdown-menu">
    <div class="container-fluid">
        <div class="row flex-grow-1">
            <div class="col-md-6">
...

虽然我不确定这是否是错误，但您必须这样做才能让行占据 100% 的宽度：

演示： https://jsfiddle.net/davidliang2008/y6a8qu2h/40/

免责声明：我没有在移动视图的下拉菜单上工作。

如何强制 bootstrap 下拉菜单定位到另一个元素

How to force a bootstrap dropdown to position to another element

megamenu

bootstrap-4

popper.js