Question

我尝试在Bootstrap 4中重现Codepen。

以下Codepen是我到达的地方（下拉2列），在网上帮助我的教程。

Navbar 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

你应该改变你的

<div class="col-6 col-md-x">

到

<div class="col-sm-6 col-md-x">

以便它们适用于菜单然后再次检查

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
  <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-sm-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-sm-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>

＆＃13;

Answer 2

您需要将position:static添加到下拉菜单上方的<li>。这将使您的下拉菜单全宽。然后要将其正确折叠，请将您在下拉列表中使用的.col-6更改为.col-md-6，然后将其修复。

带有bootstrap 4的超级菜单下拉菜单

2 个答案: