forms - bootstrap - Formularios de columna múltiple con conjuntos de campos

input group bootstrap 3

Question

Perdón por el título impreciso, no estaba seguro de cómo describirlo mejor. Actualmente estoy actualizando un sitio web a bootstrap 3 y tengo un pequeño problema con múltiples entradas en una fila de formulario.

En bootstrap 2, simplemente habría creado dos .controls.controls-row con elementos .spanX dentro para crear las columnas necesarias. Sin embargo, como estos se eliminan en bootstrap 3, los reemplacé con .form-group y las nuevas clases de columna.

Si tengo dos filas dentro del formulario (o respectivamente fieldset en este caso), la primera se convierte en no editable si la segunda es una columna de una columna (vea el código y la captura de pantalla adjunta a continuación).

Inspeccioné los elementos con Firebug y vi que el .col-sm-12 del segundo fieldset descansa sobre .form-group y no permite que el usuario haga clic en los elementos que están adentro. En el primer fieldset con el .col-sm-12 primero, todo funciona bien.

También traté de colocar un .row alrededor de cada .form-group que resuelve el problema, pero aumenta el ancho de la línea del formulario, por lo que ya no tiene un margen izquierdo dentro del fieldset.

¿Hay alguna manera de resolver esto sin aumentar el ancho de la fila de formulario?

¡Gracias por adelantado!

EDITAR: jsFiddle código generado como jsFiddle

%fieldset
  %legend= t(''.login_information'')
  .form-group
    .col-sm-12
      = f.label :login
      = f.text_field :login, :class => ''form-control'', :required => true

  .form-group
    .col-sm-6
      = f.label :password
      = f.password_field :password, :class => ''form-control''
    .col-sm-6
      = f.label :password_confirmation
      = f.password_field :password_confirmation, :class => ''form-control''

%fieldset
  %legend= t(''.personal_details'')
  .form-group
    .col-sm-4
      = f.label :title
      = f.text_field :title, :class => ''form-control''
    .col-sm-4
      = f.label :firstname
      = f.text_field :firstname, :class => ''form-control'', :required => true
    .col-sm-4
      = f.label :lastname
      = f.text_field :lastname,  :class => ''form-control'', :required => true

  .form-group
    .col-sm-12
      = f.label :email
      = f.text_field :email, :class => ''form-control email'', :required => true

Answer 1

Hay un par de cosas que deben ajustarse en su diseño:

1. Estás anidando elementos col dentro de los elementos form-group . Esto debería ser al revés (el form-group debe estar dentro del elemento col-sm-xx ).

2. Siempre debe usar un div de row para cada nueva "fila" en su diseño. En su caso, necesitaría al menos 5 filas (nombre de usuario, contraseña y co, título / nombre / apellido, correo electrónico, idioma). De lo contrario, su problemático .col-sm-12 sigue en la misma fila con los 3 .col-sm-4 da como resultado un total de columnas mayores que 12, y provoca el problema de superposición.

Aquí hay una demo fija.

Y un extracto de lo que debería ser la sección problemática HTML:

<fieldset>
    <legend>Personal Information</legend>
    <div class=''row''>
        <div class=''col-sm-4''>    
            <div class=''form-group''>
                <label for="user_title">Title</label>
                <input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
            </div>
        </div>
        <div class=''col-sm-4''>
            <div class=''form-group''>
                <label for="user_firstname">First name</label>
                <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
            </div>
        </div>
        <div class=''col-sm-4''>
            <div class=''form-group''>
                <label for="user_lastname">Last name</label>
                <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
    <div class=''row''>
        <div class=''col-sm-12''>
            <div class=''form-group''>

                <label for="user_email">Email</label>
                <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
</fieldset>

Answer 2

No estoy de acuerdo con que .form-group deba estar dentro de los elementos .col - * - n . En mi experiencia, todo el relleno apropiado ocurre automáticamente cuando usas .form-group como .row dentro de un formulario.

<div class="form-group">
    <div class="col-sm-12">
        <label for="user_login">Username</label>
        <input class="form-control" id="user_login" name="user[login]" required="true" size="30" type="text" />
    </div>
</div>

Mira esta demo .

Alterar la demostración ligeramente agregando .form-horizontal a la etiqueta del formulario cambia parte de ese relleno.

<form action="#" method="post" class="form-horizontal">

Mira esta demo .

En caso de duda, inspecciona Chrome o usa Firebug en Firefox para descubrir cosas como relleno y márgenes. El uso de .row dentro del formulario falla en el violín de edsioufi porque .row usa márgenes izquierdos y derechos negativos, por lo que dibuja los límites horizontales de los divs clasificados .row más allá de los límites de los conjuntos de campos que los contienen.