Bootstrap: alinear la entrada con el botón
¿Por qué los botones y las entradas no se alinean bien en Bootstrap?
Probé algo simple como:
<input type="text"/><button class="btn">button</button>
El botón es aproximadamente 5px
más bajo que la entrada en Chrome/Firefox.
Arranque de Twitter 4
En Twitter Bootstrap 4, las entradas y los botones se pueden alinear usando las clases input-group-prepend
y input-group-append
(consulte https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )
Botón de grupo en el lado izquierdo (anteponer)
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control">
</div>
Botón de grupo en el lado derecho (añadir)
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
Arranque de Twitter 3
Como se muestra en la respuesta de @abimelex, las entradas y los botones se pueden alinear usando las .input-group
clases (consulte http://getbootstrap.com/components/#input-groups-buttons )
Botón de grupo en el lado izquierdo
<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>
Botón de grupo en el lado derecho
<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 se agregó para mantener mi respuesta actualizada, pero vote a favor de la respuesta proporcionada por @abimelex .
Arranque de Twitter 2
Bootstrap ofrece una .input-append
clase que funciona como un elemento contenedor y corrige esto por usted:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Como señaló @OleksiyKhilkevich en su respuesta, hay una segunda forma de alinear input
y button
usar la .form-horizontal
clase:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
Las diferencias
La diferencia entre estas dos clases es que .input-append
colocará el button
elemento contra el input
elemento (para que parezca que están unidos), donde .form-horizontal
colocará un espacio entre ellos.
-- Nota --
Para permitir que los elementos input
y button
estén uno al lado del otro sin espacios, se font-size
ha configurado 0
en la .input-append
clase (esto elimina el espacio en blanco entre los inline-block
elementos). Esto puede tener un efecto adverso en los tamaños de fuente en el input
elemento si desea anular los valores predeterminados usando em
o %
medidas.
Arranque 5
<div class="input-group">
<input type="text" class="form-control">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
Arranque 3 y 4
puede usar la propiedad del botón del grupo de entrada para aplicar el botón directamente al campo de entrada.
<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><!-- /input-group -->
Eche un vistazo al documento BS4 o BS5 Input-Group para ver muchos más ejemplos.
Solo un aviso, parece haber una clase CSS especial para esto llamadaform-horizontal
input-append tiene otro efecto secundario, que reduce el tamaño de fuente a cero
Utilice .form-inline = Esto alineará a la izquierda las etiquetas y los controles de bloque en línea 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 = Alinear las etiquetas a la derecha y hacerlas flotar hacia la izquierda para que aparezcan en la misma línea que los controles, lo cual es mejor para el diseño de formulario de 2 columnas.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Ejemplos: http://twitter.github.io/bootstrap/base-css.html#forms