Tạo thanh điều hướng Bootstrap đáp ứng với hai hàng

Question

Tôi đang cố tạo một thanh điều hướng dựa trên Bootstrap 3 có đáp ứng hai hàng. Tuy nhiên, tôi gặp sự cố với cấu trúc của HTML và chức năng thu gọn.

Dưới đây là mô tả trực quan về kết quả mong muốn và tôi hy vọng ai đó có thể chỉ cho tôi đúng hướng về HTML/CSS (với chức năng Bootstrap mặc định nhiều nhất có thể).

Về cơ bản menu là mong muốn phải làm như sau:

• Trên các thiết bị tablet/desktop, dòng đầu tiên là logo và một menu của liên kết thứ cấp nhỏ (Link1-3). Hàng thứ hai là menu chính với liên kết chính (LinkA-E).

• Trên thiết bị di động, thiết kế thu gọn cổ điển phải xuất hiện với biểu trưng và biểu tượng bánh hamburger. Trình đơn mở rộng nên hiển thị các liên kết chính (LinkA-E) trước tiên, và sau đó là các liên kết phụ (Link1-3) cuối cùng.

Tablet thiết bị/Desktop:

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

thiết bị di động (thu gọn):

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

thiết bị di động (mở rộng):

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

Answer 1

Nếu tôi đã có một html/css của dự án của bạn tôi sử dụng nó để hiển thị như thế nào bạn nên làm điều đó, nhưng trong bối cảnh này HTML NÀY đến từ static navbar example of Bootstrap v3.3.7

actualy ý tưởng được đặt <div id="navbar" class="navbar-collapse collapse"> ở hàng dưới đây <div class="navbar-header"> với nổi và chiều rộng nó 100% không gian của nó, sau đó kéo lên <ul class="nav navbar-nav navbar-right"> với margin-top: -50px;

Với truy vấn phương tiện đó, chúng tôi chắc chắn nó hoạt động ngay trong thiết bị di động.

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 Hãy cho tôi biết nếu nó làm việc hay không.