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>
Puoi pubblicare la tua configurazione html completa della barra di navigazione? quella classe dovrebbe funzionare di default poiché è già inclusa nel bootstrap. –
Ho aggiunto altro HTML. Ho anche pensato che il .pull-right dovrebbe semplicemente sovrascrivere la ricerca .navbar. – vfilby
ha appena testato la classe con il tuo codice e funziona correttamente, http://jsfiddle.net/N6vGZ/4/, che cosa non funziona esattamente? –