Sto migrando da Twitter Bootstrap versione 2.3.2 all'ultima versione 3 RC 1. Ora ho incontrato un problema con i pulsanti di ricerca nella barra di navigazione in alto. Il codice HTML è qui sotto:Il modulo di ricerca pull-left/pull-right sulla barra di navigazione non funziona correttamente in Chrome
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Nav Item 1</a></li>
<li class="active"><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
<li><a href="#">Nav Item 4</a></li>
</ul>
<form class="navbar-form pull-right">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
</body>
Il problema è, funziona perfettamente in Firefox, ma in Chrome o IE 9 rende la casella di ricerca super-lungo e si muove questa casella di ricerca e il pulsante sotto la barra di navigazione in tal modo.
Ho provato a risolvere i problemi e ho scoperto che se rimuovevo "pull-right" dal modulo, la casella di ricerca e il pulsante verranno spostati sopra in linea con gli elementi di navigazione, ma hanno perso l'effetto che ha portato pull-right - occuperebbe tutto spazio sulla linea a destra.
Inoltre, come il debug se ho sostituito il modulo di ricerca con
<form class="navbar-form pull-right">
<div class="input-group">
<input type="text" placeholder="Search">
<button type="submit" class="btn btn-default">Search</button>
</div>
</form>
Allora sarà semplicemente lavorare bene; ma non è nemmeno il mio scopo.
Qualche problema con il mio codice? O è un problema con la versione 3 RC 1? Ad ogni modo per affrontarlo?
Invece di pull-destra si dovrebbe utilizzare barra di navigazione a destra, come per la documentazione. – mikeytusa