Bootstrap: allinea l'input con il pulsante

Perché i pulsanti e gli ingressi non si allineano correttamente in Bootstrap?

Ho provato qualcosa di semplice come:

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

Il pulsante è circa 5pxinferiore all'input in chrome / firefox.

Twitter Bootstrap 4

In Twitter Bootstrap 4, input e pulsanti possono essere allineati utilizzando le classi input-group-prepende input-group-append(consultare https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Pulsante di gruppo sul lato sinistro (anteponi)

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

Pulsante di gruppo sul lato destro (append)

<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

Come mostrato nella risposta di @abimelex, input e pulsanti possono essere allineati usando le .input-groupclassi (vedi http://getbootstrap.com/components/#input-groups-buttons )

Pulsante di gruppo sul lato sinistro

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

Pulsante di gruppo sul lato destro

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

Questa soluzione è stata aggiunta per mantenere aggiornata la mia risposta, ma ti preghiamo di mantenere il tuo voto positivo sulla risposta fornita da @abimelex .

Twitter Bootstrap 2

Bootstrap offre una .input-appendclasse, che funziona come elemento wrapper e lo corregge per te:

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

Come sottolineato da @OleksiyKhilkevich nella sua risposta, c'è un secondo modo per allinearlo inpute buttonusando la .form-horizontalclasse:

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

Le differenze

La differenza tra queste due classi è che .input-appendposizionerà il buttoncontro inputsull'elemento (in modo che sembrino collegati), dove.form-horizontal posizionerà uno spazio tra di loro.

-- Nota --

Per consentire agli elementi inpute buttondi essere vicini l'uno all'altro senza spaziatura, font-sizeè stato impostato su 0nella .input-appendclasse (questo rimuove la spaziatura bianca tra gli inline-blockelementi). Ciò può avere un effetto negativo sulle dimensioni dei caratteri inputnell'elemento se si desidera sovrascrivere i valori predefiniti usando emo %misurazioni.

è possibile utilizzare la proprietà del pulsante del gruppo di input per applicare il pulsante direttamente al campo di input.

Bootstrap 3 e 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 -->

Dai un'occhiata al documento BS4 Input-Group per molti altri esempi.

Solo il testa a testa, sembra che ci sia una classe CSS speciale per questo chiamato form-horizontal

input-append ha un altro effetto collaterale, che riduce la dimensione del carattere a zero

Usa .form-inline = Questo allineerà a sinistra le etichette e i controlli del blocco inline per un layout compatto

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

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.form-horizontal = Allinea a destra le etichette e spostale a sinistra per farle apparire sulla stessa linea dei controlli, il che è meglio per il layout a 2 colonne.

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

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

Ho provato soprattutto e alla fine ho apportato alcune modifiche che vorrei condividere. Ecco il codice che funziona per me (trova lo screenshot allegato):

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

Se vuoi vederlo funzionare, usa semplicemente il codice seguente nel tuo 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>

Spero che questo ti aiuti.

Avevo anche problemi con lo stesso problema. Le classi bootstrap che utilizzo non funzionano per me. Ho trovato una soluzione alternativa, come di seguito:

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

Fondamentalmente, ho scavalcato la proprietà display della classe "form-control", e ho usato altre proprietà di stile per correggere dimensioni e posizione.

Di seguito è riportato il risultato:

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>

Ho provato tutti i codici di cui sopra e nessuno di essi ha risolto i miei problemi. Ecco cosa ha funzionato per me. Ho usato l'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>

Non direttamente correlato, a meno che tu non abbia un codice simile ma ho appena notato uno strano comportamento nel form-inline, bootstrap 3.3.7

Non ho usato righe e celle per questo in quanto è un progetto desktop, se il tag di apertura era sotto la tabella (in questo caso):

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

Gli elementi del modulo si accumulerebbero.

Switch e allineato correttamente.

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

Safari 10.0.2 e Chrome più recenti non hanno fatto alcuna differenza. Forse il mio layout era sbagliato ma non è molto tollerante.

Prendi un input float come a sinistra. Quindi prendere il pulsante e spostarlo a destra. Puoi cancellare la classe quando ne prendi più di una a distanza.

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

Usa questo per spostare il div in alto o in basso nella riga. Fa miracoli per me.