bootstrap: alinear la entrada con el botón

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

Programación
css twitter-bootstrap
16º mayo 2012 в 9:39
88 vistas
Solución

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

Botón de grupo en el lado izquierdo

<div class="input-group">
  <span class="input-group-btn">
    Go!
  </span>
  <input type="text" class="form-control">
</div>

Botón de grupo en el lado derecho

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        Go!
   </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.

Twitter Bootstrap 2

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
</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
</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 %.

Community
Respuesta editada 23º mayo 2017 в 12:10
Comentarios (7)

Sólo un aviso, parece que hay una clase CSS especial para esto llamada form-horizontal.

input-append tiene otro efecto secundario, que reduce el tamaño de la fuente a cero

Comentarios (1)

Utilice .form-inline = Esto alineará a la izquierda las etiquetas y los controles inline-block para un diseño compacto

Ejemplo: http://jsfiddle.net/hSuy4/292/

<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

Comentarios (5)