Utwórz responsywny pasek nawigacyjny Bootstrap z dwoma wierszami

Question

Próbuję utworzyć responsywny pasek nawigacyjny oparty na Bootstrap 3 z dwoma wierszami. Mam jednak problem ze strukturą HTML i funkcją zwijania.

Poniżej znajduje się wizualny opis pożądanego wyniku, a miałem nadzieję, że ktoś może wskazać mi właściwy kierunek w zakresie HTML/CSS (z możliwie największą domyślną funkcjonalnością Bootstrap).

menu Zasadniczo pożądane jest, aby wykonywać następujące czynności:

• W urządzeniach tabletek/stacjonarnych pierwszy rząd jest logo i menu drobnych ogniw wtórnych (Link1-3). Drugi rząd to główne menu z głównymi linkami (LinkA-E).

• W wersji mobilnej klasyczny projekt upadku powinien pojawić się z ikoną logo i hamburgera. Rozbudowane menu powinno najpierw pokazać główne linki (LinkA-E), a następnie ostatnie linki drugorzędne (Link1-3).

tabletu/stacjonarny:

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

urządzenia przenośnego (złożony)

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

urządzenia przenośnego (rozszerzony)

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

Answer 1

Jeśli miałem HTML/CSS swojego projektu i używać go, aby pokazać, jak należy to zrobić, ale w tym kontekście TO HTML pochodzi static navbar example of Bootstrap v3.3.7

właściwie pomysł jest umieszczenie <div id="navbar" class="navbar-collapse collapse"> w rzędzie poniżej <div class="navbar-header"> z pływającym i szerokość to 100% jego przestrzeni, a następnie podciągając <ul class="nav navbar-nav navbar-right"> z margin-top: -50px;

Z tym zapytaniem o media na pewno zachowamy się poprawnie na urządzeniu moblie.

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

WŁAŚNIE Daj mi znać, jeśli to działa, czy nie.