¿Por qué los botones y las entradas no se alinean bien en bootstrap? He intentado algo simple como:
<input type="text"/><button class="btn">button</button>
El botón está unos 5px más abajo que el input en chrome/firefox.
Twitter Bootstrap 3
Como se muestra en la respuesta de @abimelex, las entradas y los botones se pueden alinear utilizando las clases .input-group
(ver http://getbootstrap.com/components/#input-groups-buttons):
<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>
Esta solución ha sido añadida para mantener mi respuesta al día, pero por favor, pegue su voto arriba en la respuesta proporcionada por @abimelex.
Bootstrap ofrece una clase .input-append
, que funciona como elemento envolvente y corrige esto por ti:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Como señala @OleksiyKhilkevich en su respuesta, hay una segunda forma de alinear input
y button
utilizando la clase .form-horizontal
:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Las diferencias/h3>
La diferencia entre estas dos clases es que .input-append
colocará el button
contra el elemento input
(para que parezca que están unidos), mientras que .form-horizontal
colocará un espacio entre ellos.
Nota
*Para permitir que los elementos input
y button
estén uno al lado del otro sin espacio, el font-size
se ha establecido en 0
en la clase .input-append
(esto elimina el espacio blanco entre los elementos inline-block
). Esto puede tener un efecto adverso en el tamaño de la fuente en el elemento input
si quieres anular los valores por defecto usando medidas em
o %
.
Utilice .form-inline = Esto alineará a la izquierda las etiquetas y los controles inline-block para un diseño compacto
Ejemplo:
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = Alinea las etiquetas a la derecha y las hace flotar a la izquierda para que aparezcan en la misma línea que los controles, lo que es mejor para el diseño de formularios de 2 columnas.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Ejemplos: http://twitter.github.io/bootstrap/base-css.html#forms