¿Es posible crear un formulario de dos columnas con Twitter bootstrap? Tienen algunos buenos ejemplos aquí: http://twitter.github.com/bootstrap/base-css.html Desafortunadamente, todos ellos están utilizando una columna.Bootstrap de Twitter: cree un formulario con 2 columnas
Envuelva la etiqueta de formulario alrededor de su división divs. Esto es trabajo para mí, pero es posible que tenga que modificar un poco las cosas:
<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>
esta es una buena forma de hacerlo – Ross
¿Qué pasa si tiene múltiples conjuntos de campos? Traté de poner la fila dentro del fieldset. Funciona de cierta manera, pero tiene algunos pequeños problemas visuales, como falta de relleno para los elementos de entrada, parece. – Sam
¿Has intentado redimensionar el ancho de la ventana? Las dos columnas se compenetran de una manera poco bonita. –
<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>
Utilicé este código y su funcionamiento. Se muestra como dos columnas en una forma usando twitter bootstrap ... Prueba esto, espero que te ayude. –
Se ve bastante, pero creo que la mayoría de las personas que usan bootstrap para sus diseños quieren evitar el uso de tablas para que el diseño se vea mejor en una gran cantidad de dispositivos (por ejemplo, teléfonos, tabletas, computadoras de escritorio, etc.) PERO Todavía estoy aprendiendo de arranque, así que lo que sé. :) – HPWD
Sería bueno si el votante de abajo mencionara por qué. –
<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>
ejemplo: http://jsfiddle.net/JJnDg/460/
He utilizado este y funciona bastante bien .. Es sensible al 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>
Yo uso las siguientes
<form class="no-margin" >
<fieldset>
<div class="form-group no-margin">
<div class="row-fluid">
<div class="form-group col-sm-6 no-margin"> Input 1 <div>
<div class="form-group col-sm-6 no-margin"> Input 2 <div>
</div>
</div>
<fieldset>
</form>
ejemplo, dos columnas con Bootstrap3
<div class="row">
<label>Date</label>
<div class="row">
<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>
Hay un pequeño error, la clase "fila líquida" ha sido reemplazada por "fila" en Bootstrap 3: http://getbootstrap.com/migration/#classes – Erowlin
Hecho, gracias Erowlin !! Actualizaré el código aquí. :RE –
2 columnas en Bootstrap 3:
http://jsfiddle.net/52VtD/10419/
<div class="container">
<div class="row">
<form action="#">
<div class="col-xs-6">
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
Conceptualmente, esto parece simple para mí . ¿Has intentado burlarse de algo? Puedes usar http://jsfiddle.net/ para ayudarte. –
Diría, del mismo modo que crea un diseño de dos columnas. No es porque ahora lo desee en una forma, eso es diferente para crear. – Styxxy
Otro buen recurso es http://www.infotuts.com/create-registration-form-easily-with-twitter-bootstrap-in-minutes/ – user1876508