Es posible crear dos columnas con twitter bootstrap?
Tienen algunos buenos ejemplos aquí:
http://twitter.github.com/bootstrap/base-css.html
Pero por desgracia, todos ellos están usando una columna.

  • Conceptualmente, esto parece sencillo para mí. He intentado burlarse de algo? Usted puede usar jsfiddle.net para ayudar a usted.
  • Yo diría que, de la misma manera como se crea una doble columna de lay-out. No es porque ahora se desea en un formulario, que es diferente a crear.
  • Otro buen recurso es infotuts.com/…

7 Comentarios

  1. 50

    Envoltura de la etiqueta form alrededor de su lapso de divs. Este es trabajo para mí, pero puede que tenga que ajustar 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 manera de hacerlo
    • Lo que si tiene varios conjuntos de campos? He intentado poner la fila dentro del grupo de controles. Que tipo de obras, pero tiene algunos pequeños problemas visuales como la falta de relleno para los elementos de entrada que parece.
    • Intenta cambiar el tamaño de ancho de la ventana? Las dos columnas compenetrate en un unpretty manera.
    • De hecho, me parece que este no funciona bien en un diseño fluido. por alguna razón, los campos de texto se superponen al reducir la screensize. Sucede justo antes del segundo tramo de envolver a una fila de abajo.
    • Se puede añadir un jsfiddle para esto?
  2. 10
    <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/

  3. 9

    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>
  4. 1

    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, el «row-fluid» la clase ha sido sustituido por el de «fila» en el Bootstrap 3 : getbootstrap.com/migration/#classes
    • Hecho, gracias Erowlin!! Voy a actualizar el código aquí. 😀
  5. 0
    <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>

    • He utilizado este código y de su trabajo. Se muestra como dos columnas en un formulario usando twitter bootstrap… prueba esto, espero que te ayude.
    • Se «ve» bastante, pero creo que la mayoría de la gente usando bootstrap para sus diseños son el deseo de evitar el uso de tablas para el diseño de la «mirada» mejor en un amplio número de dispositivos (por ejemplo, teléfonos, tabletas, ordenadores de escritorio, etc.) PERO todavía estoy aprendiendo bootstrap mí mismo, así que ¿qué sé yo. 🙂
    • Sería bueno si abajo de los votantes se menciona el por qué.
    • bueno, tal vez es porque el uso de la tabla de diseño es una mala práctica. Tablas para mostrar DATOS TABULARES, no de diseño.
    • buen punto. Yo no sé en qué estaba pensando cuando hice ese post 😛
    • Pero, ¿y si los datos del formulario es, como en una tabla conceptualmente? Decir que tengo 10 campos de entrada que se requieren de 3 fechas de cada uno (Planificada Inicio, Finalización Prevista, Real de Finalización). Quiero mostrar esto como 10 filas de 3 campos de entrada. ¿Qué hay de malo con una tabla para que?

  6. 0

    He utilizado este y funciona bastante bien.. Es sensible a 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>
  7. 0

    Yo uso el siguiente

      <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>

Dejar respuesta

Please enter your comment!
Please enter your name here