Étiquette sur le côté gauche au lieu d'au-dessus d'un champ de saisie

Question

Je voudrais que les étiquettes ne soient pas au-dessus du champ de saisie, mais sur le côté gauche.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

Ce code me donne :

J'aimerais avoir :

Answer 1

J'ai eu le même problème, voici ma solution :

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

voici le Démo

Answer 2

Vous pouvez constater, d'après les réponses existantes, que la terminologie de Bootstrap prête à confusion. Si vous regardez la documentation de Bootstrap, vous voyez que la classe formulaire-horizontal est en fait destinée à un formulaire dont les champs sont disposés les uns en dessous des autres, c'est-à-dire ce que la plupart des gens considèrent comme un formulaire vertical. La classe correcte pour un formulaire qui traverse la page est la suivante formulaire en ligne . Ils ont probablement introduit le terme en ligne parce qu'ils avaient déjà abusé du terme horizontal .

Vous voyez d'après certaines des réponses ici que certaines personnes utilisent ces deux classes sous une même forme ! D'autres pensent qu'ils ont besoin formulaire-horizontal quand ils veulent vraiment formulaire en ligne .

Je suggère de le faire exactement comme décrit dans la documentation de Bootstrap :

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

Ce qui produit :

Answer 3

Vous devez laisser flotter tous les éléments comme ceci :

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

donner une certaine marge aux éléments souhaités :

 .form-group { margin-right:5px }

et définir l'étiquette à la même hauteur de ligne que la hauteur des champs :

.form-group label { line-height:--px; }

Answer 4

Vous pouvez utiliser une balise span à l'intérieur de l'étiquette

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

Answer 5

J'ai réussi à résoudre mon problème avec . Cela semble bien fonctionner et je n'ai pas besoin d'ajouter des largeurs à toutes mes entrées manuellement.

.form-inline .form-group input {
 width: auto; 
}