Ändern der Reihenfolge der Navbar-Header-Listenelemente ohne Reihenfolge ändern im Toggle Navigation-Menü

Question

Wie kann ich einfach die Reihenfolge der Navbar-Header-Listenelemente ändern, ohne die Reihenfolge im Toggle-Navigationsmenü zu ändern. Like this sample image

My Code Is:

<nav class="navbar navbar-inverse"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#inverseNavbar1" aria-expanded="false"> 
    <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="#">Brand</a></div> 

<div class="collapse navbar-collapse" id="inverseNavbar1"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
    </ul> 
</div> 

Answer 1

Es ist nicht wirklich ein guter Weg, um die Menüpunkte neu zu ordnen. In Ihrem Beispiel können Sie jedoch Link1 um float: right erweitern, wenn der Bildschirm größer als 768px ist (Bootstrap's Breakpoint für das mobile Umschaltmenü).

Demo Here

<li class="float-right"><a href="#">Link 1</a></li> 

@media(min-width: 768px) { 
    .navbar .navbar-nav .float-right { 
     float: right; 
    } 
} 

HINWEIS - Diese Lösung Ihres Beispiel spezifisch ist. Es wäre schwierig, Float zu verwenden, um alle Ihre Links vollständig neu zu ordnen.