Bootstrap : aligner l'entrée avec le bouton

Question

Pourquoi les boutons et les entrées ne s'alignent-ils pas bien dans Bootstrap ?

J'ai essayé quelque chose de simple comme :

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

Le bouton est d'environ 5px plus bas que l'entrée dans chrome/firefox.

Answer 1

Twitter Bootstrap 4

Dans Twitter Bootstrap 4, les entrées et les boutons peuvent être alignés à l'aide de la balise input-group-prepend y input-group-append (voir https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

Bouton de groupe sur le côté gauche (prepend)

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

Bouton de groupe sur le côté droit (append)

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

Twitter Bootstrap 3

Comme indiqué dans la réponse de @abimelex, les entrées et les boutons peuvent être alignés à l'aide de l'attribut .input-group (voir http://getbootstrap.com/components/#input-groups-buttons )

Bouton "Groupe" sur le côté gauche

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

Bouton de groupe sur le côté droit

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

Cette solution a été ajoutée pour garder ma réponse à jour, mais s'il vous plaît coller votre vote positif sur la réponse fournie par @abimelex .

---

Twitter Bootstrap 2

Bootstrap offre un .input-append qui fonctionne comme un élément d'habillage et corrige ce problème pour vous :

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

Comme l'a souligné @OleksiyKhilkevich dans sa réponse, il existe une deuxième manière d'aligner input y button en utilisant le .form-horizontal classe :

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

Les différences

La différence entre ces deux classes est que .input-append placera le button contre le input (pour qu'ils aient l'air d'être attachés), où .form-horizontal placera un espace entre eux.

-- Note --

Pour permettre à l input y button pour que les éléments se trouvent les uns à côté des autres sans être espacés, les font-size a été réglé sur 0 dans le .input-append (ce qui supprime l'espacement blanc entre les éléments de l'image). inline-block éléments). Cela peut avoir un effet négatif sur les tailles des polices dans les éléments input si vous voulez remplacer les valeurs par défaut en utilisant l'élément em o % mesures.

Answer 2

Bootstrap 5

<div class="input-group">
  <input type="text" class="form-control">
  <button class="btn btn-outline-secondary" type="button">Go</button>
</div>

Bootstrap 3 & 4

vous pouvez utiliser le propriété du bouton input-group pour appliquer le bouton directement au champ de saisie.

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

Jetez un coup d'œil à BS4 o BS5 Input-Group doc pour de nombreux autres exemples.

Answer 3

Juste pour info, il semble y avoir une classe CSS spéciale pour cela appelée form-horizontal

input-append a un autre effet secondaire, il réduit la taille de la police à zéro.

Answer 4

Utilisez .form-inline \= Ceci aligne à gauche les étiquettes et les contrôles inline-block pour une mise en page compacte.

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

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

.form-horizontal \= aligner à droite les étiquettes et les faire flotter à gauche pour qu'elles apparaissent sur la même ligne que les contrôles, ce qui est préférable pour une mise en page de formulaire à deux colonnes.

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

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

Answer 5

style="padding-top: 8px"

Utilisez-le pour déplacer votre div vers le haut ou vers le bas dans votre rang. Cela fonctionne à merveille pour moi.