Mega dropdown-Menü mit bootstrap 4

Ich versuche, Sie zu reproduzieren Codepen , in der Bootstrap-4.

Den folgenden Codepen ist, wo ich kam (Dropdown mit 2 Spalten), helfen meine Anleitungen im Netz.

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

Habe ich zwei Probleme:

• Dieses design nicht anspricht (die beiden Spalten der dropdown sollte
  platziert werden unter einander auf kleinen Bildschirmen)
• Ich möchte das megamenu zu besetzen, um die volle Breite der navbar, wie
  auf der BS3 Beispiel, und reagieren

InformationsquelleAutor Melgod | 2017-11-21