Bootstrap .pull-right hat keine Auswirkungen .navbar-search

Question

Ich würde gerne die .navbar-Suchklasse in Boostrap verwenden, aber ich würde es gerne mit .pull-right verwenden. Jedoch scheint .pull-right die Suchleiste nicht zu beeinflussen, da .navbar-search ein float hat: links drin und das scheint die .navbar-search zu überschreiben.

Gibt es eine offensichtliche Möglichkeit, es mit Bootstrap arbeiten zu lassen, oder muss ich nur benutzerdefinierte CSS für eine Float-Right-Nab-Suche hinzufügen?

HTML (von HAML in einer Rails-Anwendung generiert)

<form accept-charset="UTF-8" action="/search" class="navbar-search pull-right" method="get"> 
    <div style="margin:0;padding:0;display:inline"> 
    <input name="utf8" type="hidden" value="✓"> 
    </div> 
    <input class="search-query" id="q" name="q" placeholder="Search" type="text"> 
</form> 

generiert CSS:

.navbar-search { 
    position: relative; 
    float: left; 
    margin-top: 6px; 
    margin-bottom: 0; 
} 
bootstrap.css:236 

.pull-right { 
    float: right; 
} 
bootstrap.css:525 

Voll Nav (generiert von HAML):

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     ... 
     <form accept-charset="UTF-8" action="/search" class="pull-right navbar-search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div> 
       <input class="search-query" id="q" name="q" placeholder="Search" type="text"> 
     </form> 
    </div> 
    </div> 
</div> 

Answer 1

Nach dem Testen der Klasse mit dem aktuellsten bootstrap.css Blatt, fanden wir, dass die .pull-right Klasse unter der älteren Version des Bootstrap nicht verfügbar war, so aktualisiert, dass das Problem behoben.

Demo der Klasse, die mit dem neuesten Bootstrap-Blatt verwendet wird.

Answer 2

hinzufügen wichtig! .pull-rechts

.pull-right { 
    float: right !important; 
}