Form inline à l'intérieur d'un formulaire horizontal dans Twitter bootstrap?
Quelle est la meilleure façon de concevoir un formulaire qui ressemble à cela (voir le lien ci-dessous) dans Twitter bootstrap sans aucune classe maison ?
est - il possible de régler une forme intérieure-en ligne à l'intérieur d'une forme-horizontale comme dans l'exemple ci-dessous:
5 réponses
N'est pas en "nid d'151920920" balises, qui ne fonctionnera pas. Utilisez des cours de Bootstrap.
Bootstrap 3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
vous pouvez obtenir ce comportement de plusieurs façons, c'est juste un exemple. Tester sur ce bootply
Bootstrap 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
notez que j'utilise .form-inline pour obtenir le style propper à l'intérieur d'un .controls .
Vous pouvez essai sur ce jsfiddle
pour bootstrap 3 Exemple ci-dessus fonctionne, mais est trop compliqué, plutôt que d'utiliser form-group utiliser form-inline pour les champs que vous voulez inline.
par exemple:
<div class="form-group">
<label>CVV</label>
<input type="text" size="4" class="form-control" />
</div>
<div class="form-inline">
<label>Expiration (MM/YYYY)</label><br>
<input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
cela utilise Twitter bootstrap 3.x avec une classe css pour obtenir des étiquettes de s'asseoir sur le dessus des entrées. Voici un fiddle link , assurez-vous d'étendre le panneau de résultats assez large pour voir l'effet.
HTML:
<div class="row myform">
<div class="col-md-12">
<form name="myform" role="form" novalidate>
<div class="form-group">
<label class="control-label" for="fullName">Address Line</label>
<input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
</div>
<div class="form-inline">
<div class="form-group">
<label>State</label>
<input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
</div>
<div class="form-group">
<label>ZIP</label>
<input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
</div>
</form>
</div>
</div>
CSS:
.myform input.form-control {
display: block; /* allows labels to sit on input when inline */
margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
je sais que c'est une vieille réponse mais voici ce que je fais habituellement:
CSS:
.form-control-inline {
width: auto;
float:left;
margin-right: 5px;
}
ensuite envelopper les champs que vous voulez être inlined dans un div et ajouter .forme de contrôle en ligne à l'entrée, par exemple:
HTML
<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
pour faire simple, il suffit d'ajouter un class="form-inline" avant l'entrée.
exemple:
<div class="col-md-4 form-inline"> //add the class here...
<label>Lot Size:</label> <input type="text" value="" name="" class="form-control" >
</div>