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 environ 5px plus bas que l'entrée en chrome/firefox ! [entrer la description de l'image ici][1]
Comme indiqué dans la réponse de @abimelex, les entrées et les boutons peuvent être alignés en utilisant les classes .input-group
(voir http://getbootstrap.com/components/#input-groups-buttons) :
<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>
<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 que ma réponse soit à jour, mais je vous invite à voter en faveur de [la réponse fournie par @abimelex] (https://stackoverflow.com/a/22592382/681807).
Bootstrap propose une classe .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 indiqué par @OleksiyKhilkevich dans sa réponse, il existe une deuxième façon d'aligner input
et button
en utilisant la classe .form-horizontal
:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
La différence entre ces deux classes est que .input-append
placera le button
contre l'élément input
(pour qu'ils aient l'air d'être attachés), alors que .form-horizontal
placera un espace entre eux.
Note ----
Pour permettre aux éléments input
et button
de se trouver l'un à côté de l'autre sans espacement, la font-size
a été fixée à 0
dans la classe .input-append
(cela supprime l'espacement blanc entre les éléments inline-block
). Cela peut avoir un effet négatif sur les tailles de police dans l'élément input
si vous voulez remplacer les mesures par défaut en utilisant em
ou %
.
Utilisez .form-inline = Cela aligne à gauche les étiquettes et les contrôles inline-block pour une mise en page compacte
Exemple :
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = Aligne les étiquettes à droite et les fait flotter à gauche pour qu'elles apparaissent sur la même ligne que les contrôles, ce qui est mieux pour une mise en page de formulaire à 2 colonnes.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Exemples : http://twitter.github.io/bootstrap/base-css.html#forms