Erstellen Sie eine responsive Bootstrap-Navigationsleiste mit zwei Zeilen

Question

Ich versuche, eine reaktive Bootstrap 3 basierte Navbar mit zwei Zeilen zu erstellen. Ich habe jedoch Probleme mit der Struktur der HTML- und der Minimierungsfunktion.

Unten ist eine visuelle Beschreibung des gewünschten Ergebnisses, und ich hatte gehofft, jemand könnte mich in die richtige Richtung in Bezug auf HTML/CSS zeigen (mit so vielen Standard-Bootstrap-Funktionalität wie möglich).

Im Wesentlichen wird das Menü gewünschtes folgendes zu tun:

• auf Tablet/Desktop-Geräten, die erste Zeile ist das Logo und ein Menü von kleinen sekundären Verbindungen (Link1-3). Die zweite Zeile ist das Hauptmenü mit Hauptlinks (LinkA-E).

• Auf mobilen, sollte das klassische Kollaps-Design mit dem Logo und Hamburger-Symbol erscheinen. Das erweiterte Menü sollte zuerst die Hauptverbindungen anzeigen (LinkA-E) und dann die sekundären Verbindungen (Link1-3) zuletzt.

Tablet/Desktop-Gerät:

|----------------------------------------------------------| 
| LOGO/BRAND       Link1 Link2 Link3 | 
|----------------------------------------------------------| 
| LinkA LinkB LinkC LindD LinkE      | 
|----------------------------------------------------------| 

Mobilgerät (kollabiert):

|--------------------------------------| 
| LOGO/BRAND    HAMBURGER | 
|--------------------------------------| 

Mobilgerät (erweitert):

|--------------------------------------| 
| LOGO/BRAND    HAMBURGER | 
|--------------------------------------| 
| LinkA        | 
| LinkB        | 
| LinkC        | 
| LinkD        | 
| LinkE        | 
|--------------------------------------| 
| Link1        | 
| Link2        | 
| Link3        | 
|--------------------------------------| 

Answer 1

Wenn ich eine HTML/CSS Ihres Projektes habe ich es verwenden, um zu zeigen, wie Sie das tun sollen, aber in diesem Zusammenhang THIS HTML kamen von static navbar example of Bootstrap v3.3.7

actualy die Idee <div id="navbar" class="navbar-collapse collapse"> in Reihe unterhalb <div class="navbar-header"> wird Platzierung mit floating und Breite es 100% seines Platzes, dann zieht <ul class="nav navbar-nav navbar-right"> mit margin-top: -50px;

Mit dieser Medienabfrage würden wir sicher sein, dass es sich in Moblie-Gerät richtig verhält.

HTML

<div class="container-fluid"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Logo/Brand</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">LinkA</a></li> 
     <li><a href="#">LinkB</a></li> 
     <li><a href="#">LinkC</a></li> 
     <li><a href="#">LinkD</a></li> 
     <li><a href="#">LinkE</a></li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link1</a></li> 
     <li><a href="#">Link2</a></li> 
     <li><a href="#">Link3</a></li> 
    </ul> 
    </div><!--/.nav-collapse --> 
</div> 

CSS

.navbar-collapse { 
    float: left; 
    width: 100%; 
    clear: both; 
} 

@media (min-width: 768px) { 
    .navbar-right { 
     margin-top: -50px; 
    } 
} 

GERADE Lassen Sie mich wissen, ob es funktioniert oder nicht.