bootstrap: alinee la entrada con el botón

¿Por qué los botones y las entradas no se alinean bien en bootstrap? Intenté algo simple como:

 

El botón es aproximadamente 5px más bajo que la entrada en chrome / firefox. enter image description here

Twitter Bootstrap 3

Como se muestra en la respuesta de @abimelex, las entradas y los botones se pueden alinear utilizando las .input-group (consulte http://getbootstrap.com/components/#input-groups-buttons ):

Botón de grupo en el lado izquierdo

 

Botón de grupo en el lado derecho

 

Esta solución se ha agregado para mantener mi respuesta actualizada, pero mantenga su voto positivo sobre la respuesta proporcionada por @abimelex .


Twitter Bootstrap 2

Bootstrap ofrece una clase .input-append , que funciona como un elemento contenedor y lo corrige por usted:

 

Como señaló @OleksiyKhilkevich en su respuesta, hay una segunda forma de alinear la input y el button utilizando la clase .form-horizontal :

 

Las diferencias

La diferencia entre estas dos clases es que .input-append colocará el button contra el elemento de input (para que parezca que están adjuntos), donde .form-horizontal colocará un espacio entre ellos.

— Nota —

Para permitir que los elementos de input y button estén uno al lado del otro sin espaciado, el font-size se ha establecido en 0 en la clase .input-append (esto elimina el espacio en blanco entre los elementos de inline-block ). Esto puede tener un efecto adverso en los tamaños de fuente en el elemento de input si desea anular los valores predeterminados usando em o % medidas.

Puede usar la propiedad del botón de grupo de entrada para aplicar el botón directamente al campo de entrada.

Bootstrap 3 y 4

 

Eche un vistazo al documento BS4 Input-Group para obtener muchos más ejemplos.

ejemplo para el botón de grupo de entrada bs3

Solo el encabezado, parece haber una clase especial de CSS para esta form-horizontal llamada form-horizontal

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

Use .form-inline = Esto alineará a la izquierda las tags y los controles de bloque en línea para un diseño compacto

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

 

.form-horizontal = Right alinea las tags y las hace flotar hacia la izquierda para hacer que aparezcan en la misma línea que los controles, lo que es mejor para el diseño de 2 columnas.

 (eg Label 1: [textbox] Label 2: [textbox] : [button] ) 

Ejemplos: http://twitter.github.io/bootstrap/base-css.html#forms

Intenté sobre todo y terminé con pocos cambios que me gustaría compartir. Aquí está el código que funciona para mí (encuentra la captura de pantalla adjunta):

 

enter image description here

Si quieres ver que funciona, solo usa el código siguiente en tu editor:

      

Espero que esto ayude.

También estaba luchando con el mismo problema. Las clases de arranque que uso no funcionan para mí. Encontré una solución, como la siguiente:

 

Básicamente, superé la propiedad de visualización de la clase “form-control” y usé otras propiedades de estilo para corregir el tamaño y la posición.

A continuación está el resultado:

enter image description here

 

Probé todos los códigos anteriores y ninguno de ellos solucionó mis problemas. Esto es lo que funcionó para mí. Usé input-group-addon.

 
Go

No está directamente relacionado, a menos que tengas un código similar, pero acabo de notar un comportamiento extraño para formar-en-línea, bootstrap 3.3.7

No usé fila y celdas para esto, ya que es un proyecto de escritorio, si la etiqueta de apertura estaba debajo de la tabla (en este caso):

 

Los elementos de formulario se astackrán.

Cambie y alinee correctamente.

 

Safari 10.0.2 y el último Chrome no hicieron ninguna diferencia. Tal vez mi distribución fue incorrecta, pero no es muy indulgente.

 style="padding-top: 8px" 

Use esto para mover su div hacia arriba o hacia abajo en su fila. Me funciona de maravilla.