如何强制引导程序下拉列表定位到另一个元素

问题描述

我正在使用Bootstrap 4下拉菜单构建一个大型菜单。容器不流动。如何强制将每个下拉列表的位置和样式设置为占据容器的整个宽度？与触发它的链接/按钮的位置无关。

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

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

解决方法

单击时下拉菜单显示在触发元素正下方的原因是，触发元素具有相对位置，并且下拉菜单具有绝对位置，并且顶部和左侧分别为100％和0，这将向下推动下拉菜单，将其左侧与触发元素对齐。

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

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

然后剩下的唯一事情就是将下拉菜单的left和right设置为0，以使其与容器对齐。为了使外观更好看，您可以在页面顶部设置一个负边距，以便菜单的顶部边框合并到导航栏中：

.dropdown.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/

免责声明：我没有处理移动视图的下拉菜单。