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 à peu près 5pxinférieur à l'entrée dans chrome / firefox.

Twitter Bootstrap 4

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

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

<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 (ajouter)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Twitter Bootstrap 3

Comme indiqué dans la réponse de @abimelex, les entrées et les boutons peuvent être alignés en utilisant les .input-groupclasses (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 .input-appendclasse, qui fonctionne comme un élément wrapper et 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 une deuxième façon d'aligner inputet buttond'utiliser la .form-horizontalclasse:

<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 qu'elles .input-appendplaceront le buttonhaut contre l' inputélément (de sorte qu'elles semblent attachées), où .form-horizontalplacera un espace entre elles.

-- Remarque --

Pour permettre aux éléments inputet buttond'être côte à côte sans espacement, le font-sizea été défini sur 0dans la .input-appendclasse (cela supprime l'espacement blanc entre les inline-blockéléments). Cela peut avoir un effet négatif sur la taille des polices dans l' inputélément si vous souhaitez remplacer les valeurs par défaut à l'aide de emou de %mesures.

vous pouvez utiliser la propriété de bouton de groupe d'entrée 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 œil à la doc BS4 Input-Group pour de nombreux autres exemples.

Juste la tête en haut, il semble y avoir une classe CSS spéciale pour cela appelé form-horizontal

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

Utilisez .form-inline = Cela alignera les étiquettes à gauche 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 = Alignez les étiquettes à droite et faites-les flotter vers la 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 me retrouve avec peu de changements que j'aimerais 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 t'aides.

Je me débattais également avec le même problème. Les classes de bootstrap que j'utilise ne fonctionnent pas pour moi. J'ai trouvé 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 outrepassé 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:

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>

https://getbootstrap.com/docs/4.0/components/input-group/

<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'eux n'a résolu mes problèmes. Voici ce qui a fonctionné pour moi. J'ai utilisé l'addon de groupe d'entrée.

<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 pour form-inline, bootstrap 3.3.7

Je n'ai pas utilisé de ligne et de cellule 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 du formulaire s'empileraient.

Switch et il est 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 disposition était fausse, mais elle n'est pas très indulgente.

Prenez un flotteur d'entrée comme à gauche. Prenez ensuite le bouton et faites-le flotter à droite. Vous pouvez effacer la classe lorsque vous en prenez plusieurs à distance.

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

style="padding-top: 8px"

Utilisez-le pour déplacer votre div vers le haut ou vers le bas dans votre rangée. Fonctionne des merveilles pour moi.