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:

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

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

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.

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.

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

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

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>

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.

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:

Bootstrap 4:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

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

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>

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.

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>

style="padding-top: 8px"

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