Est-il possible de créer un formulaire à deux colonnes avec twitter bootstrap ? Il y a quelques exemples intéressants ici : http://twitter.github.com/bootstrap/base-css.html Mais malheureusement, ils utilisent tous une seule colonne.
Réponses
Trop de publicités?
Chords
Points
2416
Enveloppez la balise de formulaire autour de vos divs span. Cela fonctionne pour moi, mais vous devrez peut-être modifier un peu les choses :
<div class="row">
<form class="form-horizontal">
<div class="span6">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</div>
<div class="span6">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</div>
</form>
</div>
fsimmons
Points
106
<div class="row">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<label>First Name</label>
<input type="text" class="span12" placeholder="">
</div>
<div class="span6">
<label>Last Name</label>
<input type="text" class="span12" placeholder="Type something…">
</div>
</div>
</div>
</div>exemple : http://jsfiddle.net/JJnDg/460/
Fernando_Jr
Points
38
Exemple de deux colonnes avec Bootstrap3
<div class="row">
<label>Date</label>
<div class="row-fluid">
<div class="col-xs-7" style=" padding: 0px 2px 2px 1px;">
<input type="date" class="form-control col-xs-12">
</div>
<div class="col-xs-5" style="padding: 0px 1px 2px 1px;">
<input type="time" class="form-control col-xs-12">
</div>
</div>
</div>
lk.annamalai
Points
145
<div class="row-fluid">
<form id="myForm" modelAttribute="mymodel">
<div class="span12">
<div class="well clearfix">
<div class="span5">
<legend>Text1</legend>
<table width="100%" align="center">
<tr>
<td>
<label for="lable1">Label1 *</label>
</td>
<td>
<input id="input1" class="input-xlarge"/>
</td>
</tr>
<tr>
<td>
<label for="lable2">Label2 *</label>
</td>
<td>
<input id="input2" class="input-xlarge"/>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn" type="reset" id="resetButton">Reset</button>
</td>
</tr>
</table>
</div>
<div class="span5 offset1">
<legend>Text2</legend>
</div>
</div>
</div>
</form>
Lowery Mark
Points
1
J'ai utilisé ceci et cela fonctionne plutôt bien Il répond à bootstrap
<div class="row-fluid">
<div class="span12">
<form action="" class="form-horizontal" name="user_account_add" id="user_account_add" method="post">
<div class="span12">
<div class="well clearfix">
<fieldset>
<div class="span5">
<legend>Business Info</legend>
<input type="hidden" name="action" value="save" />
<div class="control-group">
<label class="control-label">Business Name: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="business_name" id="business_name">
</div>
</div>
<legend>Owner Info</legend>
<div class="control-group">
<label class="control-label">Firstname: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="fname" id="owners_name">
</div>
</div>
<div class="control-group">
<label class="control-label">Lastname: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="Lname" id="owners_name">
</div>
</div>
</div>
<div class="span7">
<legend>Business Operation Location</legend>
<div class="control-group">
<label class="control-label">Street Address</label>
<div class="controls">
<input type="text" class="input-xlarge" name="address" id="address" >
</div>
</div>
<div class="control-group">
<label class="control-label">City</label>
<div class="controls">
<input type="text" class="span3" name="city" id="city">
</div>
</div>
<div class="control-group">
<label class="control-label">State</label>
<div class="controls">
<input type="text" class="span3" name="state" id="state">
</div>
</div>
<div class="control-group">
<label class="control-label">Zip</label>
<div class="controls">
<input type="text" class="span3" name="zip" id="zip">
</div>
</div>
</div>
</fieldset>
<button class="btn btn-primary">Submit</button>
<button class="btn">Clear</button>
</div>
</div>
</form>
</div>
</div>
