Formulaires multi-colonnes avec jeux de champs

Question

Je ne sais pas si c'est le cas, mais je ne sais pas non plus si c'est le cas. Je suis en train de mettre à jour un site web vers bootstrap 3 et j'ai un petit problème avec des entrées multiples dans une ligne de formulaire.

Dans bootstrap 2, j'aurais simplement créé deux .controls.controls-row avec .spanX pour créer les colonnes nécessaires. Cependant, comme ces éléments ont été supprimés dans bootstrap 3, je les ai remplacés par .form-group et les nouvelles classes de colonnes.

Si j'ai deux lignes dans le formulaire (resp. fieldset dans ce cas), la première devient non éditable si la seconde est une ligne à une colonne (voir le code et la capture d'écran ci-dessous).

J'ai inspecté les éléments avec firebug et j'ai vu que le champ .col-sm-12 du deuxième ensemble de champs se superpose à l'ensemble de champs .form-group et ne permet pas à l'utilisateur de cliquer sur les éléments qui s'y trouvent. Dans le premier jeu de champs avec l'élément .col-sm-12 Tout d'abord, tout fonctionne bien.

J'ai également essayé de placer un .row autour de chaque .form-group qui résout le problème, mais augmente la largeur de la ligne du formulaire, de sorte qu'il n'y a plus de marge gauche à l'intérieur du champ.

Existe-t-il un moyen de résoudre ce problème sans augmenter la largeur des rangées de formulaires ?

Merci d'avance !

EDIT : J'ai ajouté le code généré en tant que 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

Il y a deux ou trois choses qui doivent être ajustées dans la mise en page :

1. Vous êtes en train de faire votre nid col éléments au sein de form-group éléments. Cela devrait être l'inverse (l'élément form-group doit se situer à l'intérieur de la col-sm-xx ).

2. Vous devez toujours utiliser un row pour chaque nouvelle "ligne" de votre dessin. Dans votre cas, vous avez besoin d'au moins 5 lignes (nom d'utilisateur, mot de passe et code, titre/prénom/nom de famille, courriel, langue). Sinon, votre problématique .col-sm-12 est toujours sur la même ligne que les 3 ci-dessus .col-sm-4 ce qui donne un total de colonnes supérieur à 12 et provoque le problème de chevauchement.

Voici un fixe démo .

Et un extrait de ce que devrait devenir la section problématique 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

Je ne suis pas d'accord sur le fait que .form-group devrait se trouver à l'intérieur de .col-*- n éléments. D'après mon expérience, tout le rembourrage approprié se fait automatiquement lorsque vous utilisez .form-group comme .row à l'intérieur d'un formulaire.

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

Consultez ce document démo .

Si l'on modifie légèrement la démo en ajoutant .form-horizontal à la balise du formulaire, on modifie une partie de ce rembourrage.

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

Consultez ce document démo .

En cas de doute, inspectez dans Chrome ou utilisez Firebug dans Firefox pour déterminer des éléments tels que l'espacement et les marges. L'utilisation de .row dans le formulaire échoue dans le bidule d'edsioufi parce que .row utilise des marges gauche et droite négatives, ce qui fait que les limites horizontales des divs classées .row dépassent les limites des ensembles de champs qu'elles contiennent.