bootstrap: aligner l'entrée avec le bouton
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 inférieur à l'entrée dans chrome / firefox.
10 réponses
Twitter Bootstrap 3
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):
Bouton de 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 veuillez coller votre vote sur la réponse fournie par @ abimelex.
Twitter Bootstrap 2
Bootstrap propose une classe .input-append, qui fonctionne comme un élément wrapper et corrige ceci 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 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>
Les Différences
La différence entre ces deux classes est que {[5] } placera le button contre l'élément input (donc ils semblent attachés), où .form-horizontal placera un espace entre ils.
-- Note --
pour permettre aux éléments input et button d'être côte à côte sans espacement, le {[15] } a été défini sur 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 souhaitez remplacer les valeurs par défaut à l'aide des mesures em ou %.
Vous pouvez utiliser la propriétéinput-group button pour appliquer le bouton directement au champ de saisie.
Bootstrap 3 & 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 -->
Jetez un oeil à BS4 input-Group doc pour de nombreux autres exemples.
Juste en tête, il semble y avoir une classe CSS spéciale pour cela appelée form-horizontal
Input-append a un autre effet secondaire, qu'il baisse la taille de la police à zéro
Utilisez .form-inline = cela alignera à gauche les étiquettes et les contrôles de bloc en ligne 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 = droite alignez les étiquettes et faites-les flotter vers la gauche pour les faire apparaître sur la même ligne que les contrôles, Ce Qui est mieux pour la 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
J'ai surtout essayé et j'ai fini avec quelques changements que je voudrais partager. Voici le code qui fonctionne pour moi (trouvez la capture d'écran ci-jointe):
<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 vous voulez le voir fonctionner, utilisez simplement le code ci-dessous dans votre éditeur:
<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>
J'espère que cela aide.
J'étais aussi aux prises avec le même problème. Les classes bootstrap que j'utilise ne fonctionnent pas pour moi. Je suis venu avec une solution de contournement, comme ci-dessous:
<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>
Fondamentalement, j'ai dépassé la propriété d'affichage de la classe "form-control", et utilisé d'autres propriétés de style pour corriger la taille et la position.
Voici le résultat:
<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>
J'ai essayé tous les codes ci-dessus et aucun d'entre eux n'a résolu mes problèmes. Voici ce qui a fonctionné pour moi. J'ai utilisé d'entrée-groupe-addon.
<div class = "input-group">
<span class = "input-group-addon">Go</span>
<input type = "text" class = "form-control" placeholder="you are the man!">
</div>
Pas directement lié, sauf si vous avez un code similaire mais je viens de remarquer un comportement étrange à form-inline, bootstrap 3.3.7
Je n'ai pas utilisé de ligne et de cellules pour cela car il s'agit d'un projet de bureau, si la balise d'ouverture était sous la table (dans ce cas):
<table class="form-inline">
<form>
<tr>
Les éléments de formulaire seraient empilés.
Commutateur et il correctement aligné.
<form>
<table class="form-inline">
<tr>
Safari 10.0.2 et le dernier Chrome N'ont fait aucune différence. Peut-être que ma mise en page était fausse, mais ce n'est pas très indulgent.
style="padding-top: 8px"
Utilisez ceci pour déplacer votre div vers le haut ou vers le bas dans votre ligne. Fonctionne des merveilles pour moi.