2012-04-04 18 views
6

Vorrei usare la classe .navbar-search in Boostrap, ma mi piacerebbe usarlo con .pull-right. Tuttavia .pull-right non sembra influenzare la barra di ricerca come .navbar-search ha un float: lasciato in esso e sembra sovrascrivere .navbar-search.Bootstrap .pull-right non ha effetto .navbar-search

Esiste un modo ovvio per farlo funzionare con Bootstrap o devo semplicemente aggiungere un css personalizzato per una ricerca a destra?

HTML (generata da HAML in un app rotaie)

<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> 

CSS Generated:

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

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

Nav completa (generato da 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> 
+0

Puoi pubblicare la tua configurazione html completa della barra di navigazione? quella classe dovrebbe funzionare di default poiché è già inclusa nel bootstrap. –

+0

Ho aggiunto altro HTML. Ho anche pensato che il .pull-right dovrebbe semplicemente sovrascrivere la ricerca .navbar. – vfilby

+0

ha appena testato la classe con il tuo codice e funziona correttamente, http://jsfiddle.net/N6vGZ/4/, che cosa non funziona esattamente? –

risposta

8

Dopo aver testato la classe con il foglio più recente bootstrap.css, abbiamo rilevato che la classe .pull-right non era disponibile nella versione precedente del bootstrap, pertanto l'aggiornamento risolveva il problema.

della classe utilizzata con l'ultimo foglio di bootstrap.

-3

Aggiungi importante! .pull-right

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