Warum platziert das Bootstrap-Grid meinen rechts ausgerichteten Li in die nächste Zeile?

Question

Ich habe das folgende Markup, das grundsätzlich den Websitenamen auf der linken Seite und 2 Listenelemente auf der rechten Seite der Navigationsleiste haben soll. Das funktioniert, aber wenn ich die Größe des Browsers reduziere, so dass er an den x-kleinen Unterbrechungspunkt gelangt, springen die 2 Listenelemente und erscheinen in 2 Reihen linksbündig. Könnte jemand erklären, was ich falsch mache?

<nav class="navbar navbar-inverse"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-2" style="background-color:hotpink">WebsiteName</div> 
      <div class="col-xs-10" style="background-color:aquamarine"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li>menu 1</li> 
        <li>menu 2</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> 

Answer 1

Fügen Sie einfach eine Klasse hinzu, um das Bootstrap-Medienabfrage-Layout für li zu überschreiben.

Answer 2

Sie müssen die Medienabfragen für die Bootstrap-Col-Xs ändern, um einen Bruchpunkt an einem weiteren Punkt zu erzwingen. Je weniger Objekte sind hier zu finden:

http://getbootstrap.com/customize/#media-queries-breakpoints

Sie, dass Bootstrap neu kompilieren verwenden könnte und laden Sie es erneut zu einem Projekt mit dem neuen Bruchstelle für col-xs. Von dort sollte es einfach genug sein. Ich empfehle diese Option dringend, da diese Änderungen in LESS vorgenommen werden sollten.

Und wenn Sie diese Änderung nur für diese spezifische Instanz möchten, dann versuchen Sie, min-width auf Ihren divs zu verwenden, aber ich denke nicht, dass dies für alle Browser an allen Punkten gilt.