bootstrap: aligner l'entrée avec le bouton
Pourquoi les boutons et les entrées ne s'alignent-ils pas bien dans le bootstrap? J'ai essayé quelque chose de simple comme:
<input type="text"/><button class="btn">button</button>
Le bouton est environ 5 pixels plus bas que l’entrée chrome/firefox.
Twitter Bootstrap 3
Comme indiqué dans la réponse de @abimelex, les entrées et les boutons peuvent être alignés à l'aide des 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 positif sur la réponse fournie par @abimelex .
Twitter Bootstrap 2
Bootstrap propose une classe .input-append, qui fonctionne comme un élément wrapper et qui corrige cela 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 un deuxième moyen 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 .input-append placera la button contre l'élément input (de sorte qu'ils ont l'air d'être attachée), où .form-horizontal placera un espace. entre eux.
-- Remarque --
Pour permettre aux éléments input et button d'être côte à côte sans espacement, le font-size a été défini sur 0 dans les .input-append class (cela supprime l'espacement des blancs 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 de mesures em ou %.
vous pouvez utiliser la propriété input-group button property pour appliquer le bouton directement au champ input.
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 -->
Regardez doc BS4 Input-Group pour de nombreux autres exemples.
Juste en tête, il semble y avoir une classe CSS spéciale pour cela appelé form-horizontal
input-append a un autre effet secondaire, à savoir qu'il réduit la taille de la police à zéro
Use . Form-inline = Ceci alignera à gauche les étiquettes et les contrôles inline-block pour une présentation compacte.
Exemple: http://jsfiddle.net/hSuy4/292/
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
. form-horizontal = Alignez les étiquettes à droite et faites-les flotter à gauche pour les faire apparaître sur la même ligne que les contrôles, ce qui est préférable pour la présentation 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 je me suis retrouvé avec peu de changements que j'aimerais partager. Voici le code qui fonctionne pour moi (trouver 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 t'aides.
J'étais également 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 remplacé la propriété display 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>
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>
Pas directement lié, sauf si vous avez un code similaire mais je viens de remarquer un comportement étrange de form-inline, bootstrap 3.3.7
Je n'ai pas utilisé la ligne et les cellules pour cela car c'est un projet de bureau, si la balise d'ouverture était en dessous du tableau (dans ce cas):
<table class="form-inline">
<form>
<tr>
Les éléments de formulaire s'empileraient.
Basculez et c'est bien aligné.
<form>
<table class="form-inline">
<tr>
Safari 10.0.2 et les derniers Chrome ne font aucune différence. Peut-être que ma mise en page était fausse mais que ce n’est pas très tolérant.
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é 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>
Prendre un float d’entrée à gauche. Ensuite, prenez le bouton et faites-le flotter à droite. Vous pouvez effacer la classe lorsque vous prenez plus d’une distance.
<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name">
<div style="width:8%;float:left"> </div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>