Formulaire en ligne imbriqué dans un formulaire horizontal dans Bootstrap 3

Question

Je veux construire un formulaire dans Bootstrap 3 comme ceci :

Mon site (pas le lien ci-dessus) vient d'être mis à jour à partir de Bootstrap 2.3.2 et le format n'est plus correct.

Je ne peux pas trouver de doc sur ce type de formulaire sur getbootstrap.com .

Quelqu'un peut-il me dire comment faire ? Seul 'Username' serait acceptable.

Merci.

PS Il existe un question similaire mais il utilise Bootstrap 2.3.2.

Answer 1

J'ai créé un Démonstration pour vous.

Voici comment votre structure imbriquée devrait être dans Bootstrap 3 :

<div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

Remarquez comment l'ensemble form-inline est imbriqué dans le col-xs-10 div contenant le contrôle du formulaire horizontal. En d'autres termes, l'ensemble du form-inline est le "contrôle" de l'étiquette d'anniversaire dans le formulaire horizontal principal.

Note que vous rencontrerez un problème de marges gauche et droite en imbriquant le formulaire en ligne dans le formulaire horizontal. Pour résoudre ce problème, ajoutez ceci à votre css :

.form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}

Answer 2

Une autre option consiste à placer tous les champs que vous souhaitez sur une seule ligne, dans un seul fichier form-group .

Voir la démo ici

<form class="form-horizontal">
    <div class="form-group">
        <label for="name" class="col-xs-2 control-label">Name</label>
        <div class="col-xs-10">
            <input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
        </div>
    </div>

    <div class="form-group">
        <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="day"/>
        </div>    
    </div>
</form>

Answer 3

Ce site Bootply L'exemple semble être une bien meilleure option. La seule chose est que les étiquettes sont un peu trop hautes, j'ai donc ajouté padding-top:5px pour les centrer avec mes entrées.

<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-1" for="inputEmail1">Email</label>
        <div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1" for="inputPassword1">Password</label>
        <div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12" for="TextArea">Textarea</label>
        <div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
    </div>
    <div class="form-group">
        <div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
        <div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12">Phone number</label>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1">Options</label>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
        <div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <button type="submit" class="btn btn-info pull-right">Submit</button>
        </div>
    </div>
</form>
<hr>
</div>

Answer 4

Pour que cela fonctionne dans Chrome (et bootply), j'ai dû modifier le code de cette manière :

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <input type="text" class="form-control" placeholder="year" />
        <input type="text" class="form-control" placeholder="month" />
        <input type="text" class="form-control" placeholder="day" />
      </div>
    </div>
  </div>
</form>

Answer 5

Une solution beaucoup plus simple, sans tout l'intérieur form-group éléments

<div class="form-group">
       <label for="birthday" class="col-xs-2 control-label">Birthday</label>
       <div class="col-xs-10">
           <div class="form-inline">
               <input type="text" class="form-control" placeholder="year" style="width:70px;"/>
               <input type="text" class="form-control" placeholder="month" style="width:80px;"/>
               <input type="text" class="form-control" placeholder="day" style="width:100px;"/>                        
           </div>
     </div>
</div>

... et ça ressemblera à ça,

A la vôtre !