web-dev-qa-db-fra.com

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

Je veux construire un formulaire dans Bootstrap 3 comme ceci:

Mon site (pas le lien ci-dessus) se met à jour à partir de Bootstrap 2.3.2 et le format n'est plus correct.

Je ne trouve aucun document concernant ce type de formulaire sur getbootstrap.com .

Quelqu'un pourrait-il me dire comment faire cela? Seul 'Nom d'utilisateur' serait OK.

Merci.

PS Il existe une question similaire mais elle utilise Bootstrap 2.3.2.

htmlcssformstwitter-bootstraptwitter-bootstrap-3
68
Scottie

J'ai créé une démo 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 de form-inline est imbriqué dans le col-xs-10 div contenant le contrôle de la forme horizontale. En d'autres termes, l'ensemble form-inline est le "contrôle" de l'étiquette d'anniversaire dans la forme horizontale principale.

Notez que vous rencontrerez un problème de marge 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;
}
142
edsioufi

Une autre option consiste à placer tous les champs souhaités sur une seule ligne dans un seul 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>
17
Dan

Cet exemple Bootply semble être une bien meilleure option. La seule chose à faire est que les étiquettes sont un peu trop hautes alors j'ai 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>
7
dbinott

Pour que cela fonctionne dans Chrome (et bootply), je devais changer le code de cette façon:

<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>
4
Max Bertoli

J'avais des problèmes pour aligner l'étiquette sur les éléments d'entrée. J'ai donc transféré l'élément d'étiquette à l'intérieur du formulaire-en-ligne et du groupe de formulaires aussi ... et cela fonctionne ..

<div class="form-group">
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <label for="birthday" class="col-xs-2 control-label">Birthday:</label>
            </div>
            <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>
0
theCauldronQueen