Bootstrap 3.0: Comment avoir du texte et un champ de saisie sur la même ligne?

Question

Je suis en train de passer mon site web à Bootstrap 3.0. J'ai un problème avec les saisies de formulaire et le formatage du texte. Ce qui fonctionnait avec Bootstrap 2 ne fonctionne pas avec Bootstrap 3.

Comment puis-je placer du texte sur la même ligne avant et après une saisie de formulaire? J'ai réduit le problème à un souci avec la classe 'form-control' dans la version Bootstrap 3 de l'exemple.

Comment pourrais-je mettre tout le texte et la saisie sur une seule ligne? J'aimerais que l'exemple Bootstrap 3 ressemble à l'exemple Bootstrap 2 dans le jsfiddle.

Exemple JSFiddle

Mise à jour : j'ai modifié le code pour cela qui fonctionne mais j'ai des problèmes d'alignement maintenant. Des idées?

Answer 1

Tiré de la documentation http://getbootstrap.com/css/#forms-horizontal.

Utilisez les classes de grille prédéfinies de Bootstrap pour aligner des étiquettes et des groupes de contrôles de formulaire dans une mise en page horizontale en ajoutant .form-horizontal au formulaire (qui n'a pas besoin d'être un

). Ce faisant, les .form-groups se comportent comme des lignes de grille, donc pas besoin de .row.

Exemple:

    Email

    Mot de passe

           Se souvenir de moi

      Se connecter

Answer 2

Je mettrais chaque élément que vous voulez en ligne à l'intérieur d'une div col-md-* distincte dans votre ligne. Ou forcez vos éléments à s'afficher en ligne. La classe form-control affiche en bloc car c'est ainsi que Bootstrap pense que cela devrait être fait.

Answer 3

Ce dont vous avez besoin est la classe .form-inline. Vous devez cependant faire attention, avec la nouvelle classe .form.inline vous devez spécifier la largeur pour chaque contrôle.

Jetez un œil ici

Answer 4

Aucune de ces solutions n'a fonctionné pour moi, j'ai dû utiliser la classe .form-control-static.

http://getbootstrap.com/css/#forms-controls-static

Answer 5

Vous pouvez le faire comme ceci :

        Label

Fiddle