jquery - 带 Bootstrap 4 的大型菜单下拉菜单

Question

我尝试重现Codepen ，在 Bootstrap 4 中。

以下Codepen是我到达的地方(下拉两栏)，帮助我在网上的教程。

导航栏 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>

CSS

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

我有两个问题:

• 此设计不响应(下拉列表的两列应该在小屏幕上放在一起)
• 我希望megamenu占据导航栏的整个宽度，因为以 BS3 为例，并做出响应

Answer 1

您需要添加position:static到<li>它位于下拉菜单上方。这将使您的下拉菜单变为全宽。然后要使其正确折叠，请更改 .col-6您在下拉列表中使用的值为 .col-md-6这应该可以解决它。