2012-08-09 8 views
3

L'utilisation d'un défaut/forme verticale, le bootstrap documentation suggère que le bouton de soumission se trouve sous les différentes entrées, mais ce n'est pas le cas in my form.Twitter Bootstrap Bouton Envoyer Placement Non Behaving

Lorsque le navigateur dispose d'un grand espace de visualisation, il se trouve à côté du dernier champ de saisie et n'est pas aligné. Si vous redimensionnez le navigateur à une largeur de téléphone ou de tablette, Responsive prend le relais et il s'affiche correctement.

Modification du div d'emballage .span12-.span3 pousse le bouton vers le bas, mais il semble comme une solution hackish parce que l'ajout .span3 aux entrées et boutons pour les rendre uniformes en taille yields the button pushed off to the side.

Suis-je manque quelques balises ou est il y a un problème avec Bootstrap? Dans leurs documents, le bouton est précédé d'une étiquette de case à cocher et de texte d'aide enveloppé dans un p - ce qui peut affecter leur style pour le rendre correct.

+0

Pour que le bouton soit placé correctement à côté de la zone de saisie, je pense que vous devez ajouter la classe 'form-inline' au formulaire. Maintenant, vous avez des boîtes les unes sur les autres, et je ne suis pas sûr que vous pouvez l'avoir dans les deux sens avec le bootstrap.css par défaut – Marcus

+0

Je cherche à avoir le bouton de soumission en dessous de la dernière boîte de saisie. Merci pour cette info cependant. – anjunatl

+0

Oh, désolé - je pensais que vous vouliez le bouton tel qu'il est - mais aligné verticalement avec la zone de texte. Vérifiez ma réponse =) – Marcus

Répondre

6

Vous devez placer votre bouton de soumission dans une div avec la classe controls.

button on div.controls

Si vous cochez la source sur la page de documentation Bootstrap, ils divisent même toutes les entrées et les boutons dans control-group s et controls.

+0

Awesome. Le truc génial avec 'control-group' est qu'il y a beaucoup de marge dessus - je pense que c'est juste destiné à être utilisé dans' .form-horizontal'. – anjunatl

+0

Peut-être ... Twitter Bootstrap vous oblige à faire ce qu'ils veulent, devinez pourquoi c'est ce qu'on appelle un cadre =) – Marcus

+0

Ouais. Ses nuances peuvent être assez frustrantes parfois. En parlant de, je viens de réaliser pourquoi le placement des boutons est désactivé après que vous spécifiez un span [dans l'exemple maintenant-corrigé-avec-votre-fix] (http://anjunatl.com/stack/bootstrap-submit-button-fixed- spans.html) ... encore une autre nuance - Le réactif ajoute de la marge à n'importe quelle portée sur les grands écrans. Bleh. – anjunatl