Formulaires multi-colonnes avec champs

Désolé pour le titre vague, je ne savais pas comment le décrire mieux. Je suis actuellement en train de mettre à niveau un site Web en bootstrap 3 et j’ai un petit problème avec plusieurs entrées dans une ligne de formulaire.

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

Si j’ai deux lignes à l’intérieur de la fiche (resp. Fieldset dans ce cas), la première devient non modifiable si la seconde est une ligne à une colonne (voir code et capture d’écran ci-dessous).

J’ai inspecté les éléments avec firebug et j’ai vu que le .col-sm-12 du deuxième jeu de champs se trouve sur le .form-group et que l’utilisateur ne peut pas cliquer sur les éléments qu’il contient. Dans le premier jeu de champs avec le .col-sm-12 abord, tout fonctionne bien.

J’ai également essayé de placer un .row autour de chaque .form-group ce qui résout le problème, mais augmente la largeur de la ligne de formulaire. Il n’y a donc plus de marge gauche dans le jeu de champs.

Existe-t-il un moyen de résoudre ce problème sans augmenter la largeur de la ligne de formulaire?

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

Eléments de formulaire non modifiables

Il y a plusieurs choses à modifier dans votre mise en page:

Vous imbriquez des éléments de col dans form-group éléments de form-group . Ce devrait être l’inverse (le form-group devrait être dans l’élément col-sm-xx ).
Vous devez toujours utiliser une row div pour chaque nouvelle “ligne” dans votre conception. Dans votre cas, vous aurez besoin d’au moins 5 lignes (nom d’utilisateur, mot de passe et co, titre / prénom / nom, email, langue). Sinon, votre problème .col-sm-12 est toujours sur la même ligne avec les 3 .col-sm-4 ci-dessus entraînant un total de colonnes supérieur à 12 et provoquant le problème de chevauchement.

Voici une démo fixe.

Et un extrait de ce que devrait être la section HTML problématique:

  Personal Information    Title  
 
   First name  
 
   Last name  
 
 
    Email

Je ne suis pas d’accord sur le fait que .form-group soit dans les éléments .col-* -n . Dans mon expérience, tout le remplissage approprié se produit automatiquement lorsque vous utilisez .form-group comme .row dans un formulaire.

   Username

Découvrez cette démo .

Modifier légèrement la démo en ajoutant .form-horizontal à la balise de formulaire modifie une partie de ce remplissage.

Découvrez cette démo .

En cas de doute, inspectez Chrome ou utilisez Firebug dans Firefox pour déterminer des éléments tels que le remplissage et les marges. L’utilisation de .row dans la forme échoue dans le violon d’edsioufi car .row utilise les marges gauche et droite négatives, dessinant ainsi les limites horizontales des divs classés .row au-delà des limites des champs contenant.