É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

Vous pouvez utiliser la classe form-inline pour chaque groupe de formulaires :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

Answer 2

Mettez le <label> en dehors de la form-group :

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

Answer 3

La documentation de Bootstrap 3 en parle dans l'onglet de la documentation CSS, dans la section intitulée "Requires custom widths", qui indique :

Les entrées, les sélections et les zones de texte ont une largeur de 100 % par défaut dans Bootstrap. Pour utiliser le formulaire en ligne, vous devez définir une largeur sur les contrôles de formulaire utilisés à l'intérieur.

Si vous utilisez votre navigateur et les outils Firebug ou Chrome pour supprimer ou réduire le style "width", vous devriez voir les choses s'aligner comme vous le souhaitez. Vous pouvez alors clairement créer le CSS approprié pour résoudre le problème.

Cependant, je trouve étrange que je doive faire tout cela. Je ne pouvais m'empêcher de penser que cette manipulation était à la fois ennuyeuse et, à long terme, source d'erreurs. En fin de compte, j'ai utilisé une classe factice et un peu de JS pour shimer globalement toutes mes entrées en ligne. Il s'agissait d'un petit nombre de cas, donc pas vraiment d'un problème.

Néanmoins, j'aimerais aussi entendre quelqu'un qui a la "bonne" solution et qui pourrait éliminer mon shim/hack.

J'espère que cela vous aidera, et je vous félicite de ne pas avoir soufflé sur toutes les personnes qui ont ignoré votre demande concernant Bootstrap 3.

Answer 4

Vous pouvez créer un tel formulaire où l'étiquette et le contrôle de formulaire sont côte à côte en utilisant deux méthodes -

1. Mise en page du formulaire en ligne

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. Mise en page horizontale du formulaire

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

Vous pouvez consulter cette page pour obtenir plus d'informations et une démonstration en direct. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Answer 5

Comme ceci

DEMO

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>