Jquery 带引导4的超大菜单下拉菜单

我试图复制，在引导4

以下是我在网上帮助我的教程的地方（下拉列表，共2列）

导航栏HTML

<nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item dropdown has-mega-menu">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
                    aria-expanded="false">Dropdown</a>

                <div class="dropdown-menu">
                    <div class="px-0 container container-sm">
                        <div class="row">
                            <div class="col-6 col-md-x">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                                <a class="dropdown-item" href="#">Or a link</a>
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                            </div>
                            <div class="col-6 col-md-x">
                                <a class="dropdown-item" href="#">Something else here</a>
                                <a class="dropdown-item" href="#">Or a link</a>
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                                <a class="dropdown-item" href="#">Or a link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

我有两个问题：

• 此设计没有响应性（下拉列表的两列应为 在小屏幕上相互放置）
• 我希望megamenu占据导航栏的全部宽度，如图所示 在BS3示例上，并做出响应

---

您应该更改您的

到

这样他们就可以为菜单工作，然后再次检查

@媒体屏幕和（最小宽度：576px）{
.有超大菜单.容器sm{
宽度：540px；
}
}
@媒体屏幕和屏幕（最小宽度：768px）{
.有超大菜单.容器md{
宽度：720px；
}
}
@媒体屏幕和屏幕（最小宽度：992px）{
.有超大菜单.集装箱lg{
宽度：960px；
}
}
@媒体屏幕和屏幕（最小宽度：1200px）{
.有超大菜单.容器xl{
宽度：1140px；
}
}

您需要将

位置：static

添加到下拉菜单上方的

。这将使您的下拉菜单全屏显示。然后，要使其正确折叠，请将下拉列表中使用的

.col-6

更改为

.col-md-6

，这样可以修复它。

要使其占据整个宽度，请拆下外部容器。（或将类别更改为

容器流体

）静态到li的位置是一个良好的开端。然后添加宽度：100%到下拉菜单规则的问题之一。css不再有用了。用col替换col-6或col-4设置了另一个问题：菜单变得响应。

@media screen and (min-width: 576px) {
  .has-mega-menu .container-sm {
    width: 540px;
  }
}

@media screen and (min-width: 768px) {
  .has-mega-menu .container-md {
    width: 720px;
  }
}

@media screen and (min-width: 992px) {
  .has-mega-menu .container-lg {
    width: 960px;
  }
}

@media screen and (min-width: 1200px) {
  .has-mega-menu .container-xl {
    width: 1140px;
  }
}