bootstrap: allinea l’input con il pulsante

Perché i pulsanti e gli ingressi non si allineano bene nel bootstrap? Ho provato qualcosa di semplice come:

 

Il pulsante è circa 5px più basso dell’input in chrome / firefox. inserisci la descrizione dell'immagine qui

Twitter Bootstrap 3

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

Pulsante di gruppo sul lato sinistro

 

Pulsante di gruppo sul lato destro

 

Questa soluzione è stata aggiunta per mantenere aggiornata la mia risposta, ma si prega di attenersi alla votazione sulla risposta fornita da @abimelex .


Twitter Bootstrap 2

Bootstrap offre una class .input-append , che funziona come un elemento wrapper e corregge questo per te:

 

Come sottolineato da @OleksiyKhilkevich nella sua risposta, c’è un secondo modo per allineare input e button usando la class .form-horizontal :

 

Le differenze

La differenza tra queste due classi è che .input-append posizionerà il button contro l’elemento di input (in modo che sembri collegato), dove .form-horizontal posizionerà uno spazio tra di loro.

— Nota —

Per consentire che gli elementi di input e di button siano l’uno accanto all’altro senza spaziatura, la font-size è stata impostata su 0 nella class .input-append (ciò rimuove la spaziatura bianca tra gli elementi di inline-block ). Questo può avere un effetto negativo sulle dimensioni dei caratteri nell’elemento di input se si desidera sovrascrivere i valori di default usando em o % misurazioni.

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

Bootstrap 3 e 4

 

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

esempio per il pulsante del gruppo di input bs3

Giusto il testa a testa, sembra esserci una speciale class CSS per questo chiamato form-horizontal

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

Usa .form-inline = Ciò consentirà di allineare le etichette e i controlli di blocco in linea per un layout compatto

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

 

.form-horizontal = Destra allinea le etichette e le sposta a sinistra per farle apparire sulla stessa riga dei controlli che è meglio per il layout di 2 colonne.

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

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

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

 

inserisci la descrizione dell'immagine qui

Se vuoi vederlo funzionare, basta usare il codice sotto il tuo editor:

      

Spero che questo ti aiuti.

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

 

Fondamentalmente, ho scavalcato la proprietà display di class “form-control” e ho usato altre proprietà di stile per correggere la dimensione e la posizione.

Di seguito è il risultato:

inserisci la descrizione dell'immagine qui

 

Ho provato tutti i codici di cui sopra e nessuno di loro ha risolto i miei problemi. Ecco cosa ha funzionato per me. Ho usato l’add-on-group-addon.

 
Go

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

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

 

Gli elementi del modulo si impilavano.

Passare e correttamente allineati.

 

Safari 10.0.2 e l’ultima versione di Chrome non hanno apportato alcuna differenza. Forse il mio layout era sbagliato ma non è molto indulgente.

 style="padding-top: 8px" 

Usa questo per spostare il div su o giù nella tua fila. Fa miracoli per me.