当位置固定时，Bootstrap 4 巨型菜单下拉菜单不会留在容器内答案

【问题标题】：Bootstrap 4 mega menu drop down doesn't stay within container when position is fixed当位置固定时，Bootstrap 4 巨型菜单下拉菜单不会留在容器内
【发布时间】：2020-05-24 17:54:06
【问题描述】：

我在 Bootstrap 4 中使用导航栏创建了一个“超级菜单”。菜单使用 fixed-top 类，因此它始终在屏幕上，并且使用 container 类有一个直接子 div，以便菜单的内容居中。

我正在使用以下类来创建大型菜单。

.megamenu-li {
    position: static;
}

.megamenu {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    padding: 15px;
}

这种方法的问题是，当您打开一个大型菜单时，其内容会超出窗口宽度的 100%。

这是一个演示 https://jsfiddle.net/bvw9mf7d/

我怎样才能使 megamenu 保持与具有 container 类的 div 相同的约束？

我尝试过的。

我试图用container 类将整个内容包装在一个div 中，但这不会影响megamenu 下拉菜单。

我试图像这样改变我的班级 megamenu

.megamenu {
    position: absolute;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 15px;
}

哪种方法有效，但不能很好地遵循容器。这是该尝试解决方案的关键。

https://jsfiddle.net/7Ln4zh9x/

我创建了第三个演示，显示 megamenu 停留在引导容器中。 https://jsfiddle.net/pgfxst5h/

这个的问题在于它不是

导航栏背景不会扩大整个宽度
导航栏不固定

怎样才能达到我想要的效果？

任何帮助将不胜感激。非常感谢。

【问题讨论】：

这种方法的问题是当你打开一个超大菜单时，它的内容会超出窗口宽度的 100%。在您的第一个小提琴中，大型菜单和下拉菜单都保持在屏幕宽度内，能否详细说明问题所在？

标签： html css twitter-bootstrap

【解决方案1】：

如果您在.megamenu 中添加.container，您可以限制宽度，但您必须在其中添加另一个<div>。使用下面的 HTML/CSS，您可以使默认的父 megamenu 背景透明，然后为子 <div> 使用您想要的任何背景/边框颜色，我将其命名为 .megamenu-inner。

更新小提琴：https://jsfiddle.net/q15dxj2t/1/

<div class="dropdown-menu megamenu" aria-labelledby="navbarDropdown">
    <div class="container">
        <div class="megamenu-inner">
            <div class="row">
                <div class="col-6">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
                <div class="col-6">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
        </div>
    </div>
</div>

.megamenu {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.megamenu-inner {
    background: red;
    padding: 15px;
    width: 100%;
}

【讨论】：