Создать отзывчивый Bootstrap navbar с двумя строками

Question

Я пытаюсь создать чувствительную навигационную панель Bootstrap 3 с двумя строками. Тем не менее, у меня возникают проблемы со структурой HTML и функциональностью коллапса.

Ниже представлено визуальное описание желаемого результата, и я надеялся, что кто-то сможет указать мне в правильном направлении с точки зрения HTML/CSS (с максимально возможной функциональностью Bootstrap по умолчанию).

По существу меню желательно сделать следующее:

• На таблетки/настольных устройств, первая строка является логотипом и меню небольших вторичных звеньев (Link1-3). Вторая строка - это главное меню с основными ссылками (LinkA-E) .

• На мобильном устройстве, классический дизайн обрушения должен появляться с логотипом и значком гамбургера. В расширенном меню должно быть сначала показать основные ссылки (LinkA-E), а затем вторичные ссылки (Link1-3).

планшетного устройства/рабочего стола:

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

Мобильное устройство (разрушилась):

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

Мобильное устройство (расширенный):

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

Answer 1

Если я имел HTML/CSS вашего проекта я использую его, чтобы показать, как вы должны сделать это, но в этом контексте ЭТОГО HTML пришел из static navbar example of Bootstrap v3.3.7

actualy идея размещения <div id="navbar" class="navbar-collapse collapse"> в строке ниже <div class="navbar-header"> с плавающей и шириной 100% его площади, затем потянув вверх <ul class="nav navbar-nav navbar-right"> с margin-top: -50px;

С этим запросом на средства массовой информации мы уверены, что он будет вести себя правильно в устройстве 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; 
    } 
} 

JUST Дайте мне знать, если он работал или нет.