Bootstrap: alinee la entrada con el botón


299

¿Por qué los botones y las entradas no se alinean bien en Bootstrap?

Intenté algo simple como:

<input type="text"/><button class="btn">button</button>

El botón es más 5pxbajo que la entrada en Chrome / Firefox.

ingrese la descripción de la imagen aquí

Respuestas:


551

Twitter Bootstrap 4

En Twitter Bootstrap 4, las entradas y los botones se pueden alinear utilizando las clases input-group-prependy 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 (agregar)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Twitter Bootstrap 3

Como se muestra en la respuesta de @abimelex, las entradas y los botones se pueden alinear utilizando las .input-groupclases (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 ha agregado para mantener mi respuesta actualizada, pero mantenga su voto positivo en la respuesta proporcionada por @abimelex .


Twitter Bootstrap 2

Bootstrap ofrece una .input-appendclase, que funciona como un elemento contenedor y lo corrige 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 alinearse inputy buttonusar la .form-horizontalclase:

<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-appendcolocará la parte buttonsuperior contra el inputelemento (para que parezca que están unidas), donde .form-horizontalcolocará un espacio entre ellas.

-- Nota --

Para permitir que el inputy buttonelementos a ser uno junto al otro sin separación, la font-sizese ha establecido en 0la .input-appendclase (esto elimina el espacio en blanco entre los inline-blockelementos). Esto puede tener un efecto adverso en los tamaños de fuente en el inputelemento si desea anular los valores predeterminados usando emo %medidas.


66
Gracias por su respuesta, pero siento que algo va mal aquí. Seguramente no soy la primera persona en desear que los componentes de bootstrap se alineen con elementos de forma.
pguardiario

@pguardiario: tienes toda la razón. Parecía estar mal y después de golpearme el cerebro recordé la .input-appendclase.
Me duele la cabeza

1
Parece extraño que necesite una clase de contenedor para hacer esto. ¿No deberían alinearse por defecto?
opsb

2
@opsb si ocuparan la misma cantidad de espacio vertical, entonces sí lo harían. Sin embargo, los campos de entrada en twitter bootstrap tienen un margin-bottom: 9pxpero los botones no, por lo que no ocupan el mismo espacio vertical. Dado que ambos elementos tienen una middlealineación vertical, el botón está desplazado debido a la diferencia. El uso del .input-appendcontenedor elimina este valor de margen inferior.
Me duele la cabeza

Bien, supongo que rompería otros diseños de formularios si tuvieran la misma altura vertical de forma predeterminada.
opsb

187

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

<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 Input-Group para obtener muchos más ejemplos.

ejemplo para el botón de grupo de entrada bs3


3
Otros no funcionaron para mí, este sí lo hizo, tal como yo quería. Gracias.
Colandus

1
Para mí, no funcionó si creé una etiqueta de extensión adicional para asignar la clase, pero funcionó si agregué esa clase a la etiqueta div:<div class="form-group input-group-btn">
J0ANMM

Esta respuesta está desactualizada para BS4, eche un vistazo a mi respuesta.
Alexander Kim

37

Solo el aviso, parece haber una clase CSS especial para esto llamada form-horizontal

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


1
+1 buen lugar: tuve que investigar por qué usaron font-size: 0y aprendieron algo nuevo :) ¡Gracias!
Me duele la cabeza el

30

Use .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 = Alinee las etiquetas a la derecha y flótelas a 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


2
Puedo confirmar que form-inlinefunciona para Bootstrap 3. Gracias.
Austin

¡Fantástico! ¡Exactamente lo que necesitaba para una forma problemática!
its_notjack

Parece que .form-inline solo funciona en ventanas gráficas de al menos 768 px de ancho: w3schools.com/bootstrap/bootstrap_forms.asp
anemaria20

16

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

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

ingrese la descripción de la imagen aquí

Si quieres verlo funcionar, solo usa el código a continuación en tu editor:

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

Espero que esto ayude.


¿Para qué versión de Bootstrap es esto? ¿Y qué problema causa no usar style="width:0;"?
Karl Adler

Si no utiliza el ancho: 0, esto ocupará todo el ancho de la página.
Abhimanyu

manera de arranque sería envolver con un elemento col como <div class="col-md-4">No hay necesidad dewidth: 0
Karl Adler

configuré porque no quiero que los controles de entrada ocupen todo el ancho de la pantalla
Abhimanyu

6

También estaba luchando con el mismo problema. Las clases de bootstrap que uso no me funcionan. Se me ocurrió una solución alternativa, como a continuación:

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..." 
        class="form-control" 
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit" 
        class="btn btn-primary" 
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

Básicamente, anulé la propiedad de visualización de la clase "control de formulario" y usé otras propiedades de estilo para corregir el tamaño y la posición.

El siguiente es el resultado:

ingrese la descripción de la imagen aquí



4
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

3

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

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>

1

No está directamente relacionado, a menos que tenga un código similar, pero acabo de notar un comportamiento extraño en form-inline, bootstrap 3.3.7

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

<table class="form-inline"> 
<form> 
<tr>

Los elementos de la forma se apilarían.

Cambie y se alineó correctamente.

<form>
<table class="form-inline">
<tr>

Safari 10.0.2 y la última versión de Chrome no hicieron ninguna diferencia. Tal vez mi diseño estaba equivocado, pero no es muy indulgente.


1

Tome un flotador de entrada a la izquierda. Luego tome el botón y flote hacia la derecha. Puedes borrar la clase cuando tomas más de una distancia.

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

-1
style="padding-top: 8px"

Use esto para cambiar su div hacia arriba o hacia abajo en su fila. Funciona de maravilla para mí.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.