Perché i pulsanti e gli input non si allineano bene in bootstrap? Ho provato qualcosa di semplice come:
<input type="text"/><button class="btn">button</button>
Il pulsante è circa 5px più basso dell'input in chrome/firefox.
Twitter Bootstrap 3
Come mostrato nella risposta di @abimelex, gli input e i pulsanti possono essere allineati usando le classi .input-group
(vedi http://getbootstrap.com/components/#input-groups-buttons):
h3>Pulsante di gruppo sul lato sinistro
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Questa soluzione è stata aggiunta per mantenere aggiornata la mia risposta, ma per favore appiccicate il vostro up-vote su la risposta fornita da @abimelex.
{{13398}}};
Twitter Bootstrap 2
Bootstrap offre una classe .input-append
, che funziona come un elemento wrapper e corregge questo per te:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Come sottolineato da @OleksiyKhilkevich nella sua risposta, c'è un secondo modo per allineare input
e button
usando la classe .form-horizontal
:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Le differenze
La differenza tra queste due classi è che .input-append
metterà il button
contro l'elemento input
(così sembrano attaccati), mentre .form-horizontal
metterà uno spazio tra di loro.
Nota
*Per permettere agli elementi input
e button
di essere uno accanto all'altro senza spaziatura, il font-size
è stato impostato a 0
nella classe .input-append
(questo rimuove la spaziatura bianca tra gli elementi inline-block
). Questo può avere un effetto negativo sulle dimensioni dei caratteri nell'elemento input
se vuoi sovrascrivere i valori predefiniti usando misure em
o %
.
Usa .form-inline = Questo allineerà a sinistra le etichette e i controlli inline-block per un layout compatto
Esempio:
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = Allinea a destra le etichette e le fa fluttuare a sinistra per farle apparire sulla stessa linea dei controlli, il che è meglio per il layout a 2 colonne del modulo.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Esempi: http://twitter.github.io/bootstrap/base-css.html#forms