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

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:

Je voudrais avoir:

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>

Mettez l' <label>extérieur le 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>

La documentation Bootstrap 3 en parle dans l'onglet de documentation CSS dans la section intitulée «Requiert des largeurs personnalisées», qui stipule:

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 devrez définir une largeur sur les contrôles de formulaire utilisés dans.

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

Cependant, je trouve étrange que je doive faire cela du tout. Je ne pouvais pas m'empêcher de penser que cette manipulation était à la fois ennuyeuse et à long terme, sujette aux erreurs. En fin de compte, j'ai utilisé une classe factice et quelques JS pour shim globalement toutes mes entrées en ligne. C'était un petit nombre de cas, donc pas vraiment préoccupant.

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

J'espère que cela vous aidera, et vous aidera à ne pas faire sauter le joint à toutes les personnes qui ont ignoré votre demande en tant que préoccupation Bootstrap 3.

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. Disposition 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 plus d'informations et une démo en direct - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Comme ça

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>

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="[email protected]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

voici la démo

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éfinissez l'étiquette sur la même hauteur de ligne que la hauteur des champs:

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

Vous pouvez voir à partir des réponses existantes que la terminologie de Bootstrap est déroutante. Si vous regardez la documentation de bootstrap, vous voyez que la classe form-horizontal est en fait pour un formulaire avec des champs en dessous les uns des autres, c'est-à-dire ce que la plupart des gens considéreraient comme un formulaire vertical. La classe correcte pour un formulaire traversant la page est form-inline . Ils ont probablement introduit le terme en ligne parce qu'ils avaient déjà abusé du terme horizontal .

Vous voyez à partir de certaines des réponses ici que certaines personnes utilisent ces deux classes sous une seule forme! D'autres pensent qu'ils ont besoin d'un formulaire horizontal alors qu'ils veulent en fait un formulaire en ligne .

Je suggère de le faire exactement comme décrit dans la documentation 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:

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>

J'ai réussi à résoudre mon problème avec. Semble fonctionner correctement et signifie que je n'ai pas à ajouter manuellement des largeurs à toutes mes entrées.

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

Je suis sûr que vous auriez déjà trouvé votre réponse ... voici la solution à laquelle j'ai dérivé.

C'est mon CSS.

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

Et mon HTML ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

Vous pouvez voir l'exemple de travail ici ... http://jsfiddle.net/s6Ujm/

PS: Je suis aussi un débutant, des designers professionnels ... n'hésitez pas à partager vos avis.

Je pense que c'est ce que vous voulez, à partir de la documentation bootstrap "Formulaire horizontal Utilisez les classes de grille prédéfinies de Bootstrap pour aligner les étiquettes et les groupes de contrôles de formulaire dans une disposition horizontale en ajoutant .form-horizontal au formulaire. Cela change .form-groups en se comportent comme des lignes de grille, donc pas besoin de .row ". Alors:

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

Violon: http://jsfiddle.net/beewayne/B9jj2/29/

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

Nous pouvons également l'utiliser simplement comme

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

Il semble que l'ajout style="width:inherit;"aux entrées fonctionne très bien. démo jsfiddle

Aucun CSS requis. Cela devrait bien apparaître sur votre page. Vous pouvez définir col-md-*selon vos besoins

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>