Bootstrap 3 Menu Navbar Collapse ở bên trái cho các thanh điều hướng bên trái và bên phải

Question

Tôi có thanh điều hướng Bootstrap 3 với các mục điều hướng bên trái và các mục điều hướng bên phải (như hình bên dưới).

Khi sụp đổ, tôi muốn cả hai navbar-Toggle (AKA 'đơn bánh hamburger') và các mặt hàng của mình bị bỏ lại thẳng hàng.

Mã của tôi cho đến nay:

<nav class="navbar navbar-default custom-navbar" role="navigation"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button>  
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Left</a></li> 
     <li><a href="#about">Left</a></li> 
    </ul> 
    <ul class="nav navbar-nav pull-right"> 
     <li><a href="#about">Right</a></li> 
     <li><a href="#contact">Right</a></li> 
    </ul> 
    </div> 
</nav> 

Các CSS để có navbar-Toggle bên trái là:

@media (max-width:767px) { 
    .custom-navbar .navbar-right { 
     float: right; 
     padding-right: 15px; 
    } 
    .custom-navbar .nav.navbar-nav.navbar-right li { 
     float: left; 
    } 
    .custom-navbar .nav.navbar-nav.navbar-right li > a { 
     padding:8px 5px; 
    } 
    .custom-navbar .navbar-toggle { 
     float: left; 
     margin-right: 0 
    } 
    .custom-navbar .navbar-header { 
     float: left; 
     width: auto!important; 
    } 
    .custom-navbar .navbar-collapse { 
     clear: both; 
     float: none; 
    } 
} 

Tôi đã thêm một "kéo-right" phong cách để có các mục liên kết, không thành công.

"Thanh điều hướng bên phải" hoạt động kém. Trong thực tế, với nó, tôi sẽ có cả hai mặt hàng bên phải trên cùng một hàng. Sử dụng "kéo-phải" chúng hoạt động như các hàng đơn, nhưng vẫn ở bên phải.

này khiến tôi với:

• Thực đơn bánh hamburger ở bên trái (như mong muốn),
• Các mặt hàng navbar-trái bên trái (như mong muốn), các mục đúng
• Các navbar vẫn ở bên phải (Tôi muốn điều này được sửa!).

Kết quả cuối cùng:

Đoạn mã là here.

Answer 1

Tôi đã thực hiện một vài điều chỉnh để CSS và đánh dấu mà bạn có thể xem here của bạn.

Một điều tôi muốn chỉ ra là pull-right và các lớp pull và push khác để sắp xếp lại cột lưới.

Answer 2

Bạn có thể sử dụng quy tắc !important để ghi đè hành vi mặc định của kéo phải.

@media (max-width:767px) { 
.nav.navbar-nav.pull-right { 
    float: left !important; 
} 
} 

Output trong < 768px thiết bị:

Bootply