Largeurs d’entrée sur Bootstrap 3

Mise à jour à nouveau: je ferme cette question en sélectionnant la meilleure réponse pour empêcher les gens d’append des réponses sans vraiment comprendre la question. En réalité, il n’y a aucun moyen de le faire avec la fonctionnalité intégrée sans utiliser de grid ni append de css supplémentaires. Les grids ne fonctionnent pas bien si vous avez affaire à help-block éléments de help-block d’ help-block qui doivent aller au-delà d’une entrée courte, par exemple, mais qui sont intégrées. Si c’est un problème, je vous recommande d’utiliser des classes css supplémentaires que vous pouvez trouver dans la discussion BS3 ici . Maintenant que BS4 est sorti, il est possible d’utiliser les styles de dimensionnement inclus pour gérer cela afin que cela ne soit pas pertinent pour beaucoup plus longtemps. Merci à tous pour vos commentaires sur cette question populaire de SO.

Mise à jour: Cette question rest ouverte car il s’agit de la fonctionnalité intégrée à BS pour gérer la largeur d’entrée sans recourir à la grid (parfois ils doivent être gérés indépendamment). J’utilise déjà des classes personnalisées pour gérer cela, ce n’est donc pas un truc sur les CSS de base. La tâche est dans la liste de discussion des fonctionnalités de BS et n’a pas encore été traitée.

Question originale: Quelqu’un at-il un moyen de gérer la largeur de saisie sur BS 3? J’utilise actuellement des classes personnalisées pour append cette fonctionnalité, mais j’ai peut-être manqué certaines options non documentées.

Les documents actuels indiquent d’utiliser .col-lg-x, mais cela ne fonctionne clairement pas car il ne peut être appliqué qu’au div du conteneur, ce qui provoque tous les problèmes de mise en page et de flottement.

Voici un violon Bizarre, c’est que sur le violon je ne peux même pas redimensionner le groupe de formulaires.

http://jsfiddle.net/tX3ae/

 

Ce que vous voulez faire est certainement réalisable.

Ce que vous voulez, c’est emballer chaque groupe dans une rangée, pas la forme entière avec une seule ligne. Ici:

 

My form

How to make these input fields small and retain the layout.

Le nouveau jsfiddle que j’ai fait: NEW jsfiddle

Notez que dans le nouveau violon, j’ai également ajouté «col-xs-5» pour que vous puissiez le voir aussi sur des écrans plus petits – les supprimer ne fait aucune différence. Mais gardez à l’esprit que dans vos classes d’origine, vous n’utilisez que «col-lg-1». Cela signifie que si la largeur de l’écran est inférieure à la taille de la requête de média ‘lg’, le comportement de bloc par défaut est utilisé. Fondamentalement, en appliquant uniquement «col-lg-1», la logique que vous utilisez est la suivante:

 IF SCREEN WIDTH < 'lg' (1200px by default) USE DEFAULT BLOCK BEHAVIOUR (width=100%) ELSE APPLY 'col-lg-1' (~95px) 

Voir le système de grid Bootstrap 3 pour plus d'informations. J'espère que j'ai été clair sinon laissez-moi savoir et je développerais.

Dans Bootstrap 3

Vous pouvez simplement créer un style personnalisé:

 .form-control-inline { min-width: 0; width: auto; display: inline; } 

Ensuite, ajoutez-le pour former des contrôles comme ceux-ci:

 

De cette façon, vous n’avez pas besoin de mettre un balisage supplémentaire pour la mise en page dans votre code HTML.

ASP.net MVC va à Content- Site.css et supprime ou commente cette ligne:

 input, select, textarea { /*max-width: 280px;*/ } 

Je pense que vous devez envelopper les entrées dans un col-lg-4 , puis à l’intérieur du form-group et tout est contenu dans une form-horizontal .

  
...

Démo sur Bootply – http://bootply.com/78156

EDIT: De la documentation Bootstrap 3 ..

Les entrées, les sélections et les zones de texte sont 100% larges par défaut dans Bootstrap. Pour utiliser le formulaire en ligne, vous devez définir une largeur sur les contrôles de formulaire utilisés.

Une autre option consiste à définir une largeur spécifique à l’aide de CSS:

 .form-control { width:100px; } 

Ou, appliquez le col-sm-* au `form-group ‘.

 

Ajouter la classe au formulaire.group pour contraindre les entrées

Les documents actuels indiquent d’utiliser .col-xs-x, no lg. Alors j’essaye en violon et ça semble fonctionner:

http://jsfiddle.net/tX3ae/225/

pour garder la mise en page peut-être que vous pouvez changer où vous mettez la classe “row” comme ceci:

 

My form

How to make these input fields small and retain the layout.

http://jsfiddle.net/tX3ae/226/

Si vous utilisez le modèle Master.Site dans Visual Studio 15, le projet de base a “Site.css” qui couvre la largeur des champs de contrôle de formulaire.

Je ne pouvais pas obtenir la largeur de mes zones de texte pour obtenir plus de 300px de large. J’ai essayé tout et rien n’a fonctionné. J’ai trouvé qu’il y avait un paramètre dans Site.css qui causait le problème.

Débarrassez-vous de cela et vous pouvez contrôler vos largeurs de champ.

 /* Set widths on the form inputs since otherwise they're 100% wide */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="select"] { max-width: 280px; } 

Je sais que c’est un vieux thread, mais j’ai rencontré le même problème avec un formulaire en ligne, et aucune des options ci-dessus n’a résolu le problème. J’ai donc corrigé mon formulaire en ligne comme suit: –

 
0 results

C’était ma solution. Bit hack hack, mais a fait le travail pour un formulaire en ligne.

Dans Bootstrap 3

Tous les éléments textuels ,

http://getbootstrap.com/css/#forms-example

Il semble que, dans certains cas, nous devons définir manuellement la largeur maximale que nous voulons pour les entrées.

En tout cas, votre exemple fonctionne. Il suffit de le vérifier avec un grand écran, de sorte que vous pouvez voir le nom et les champs d’e-mail obtenir le 2/12 de la (col-lg-1 + col-lg-1 et vous avez 12 colonnes). Mais si vous avez un écran plus petit (redimensionnez simplement votre navigateur), les entrées s’étendent jusqu’à la fin de la ligne.

Vous n’avez pas à abandonner le simple css 🙂

 .short { max-width: 300px; }  

Vous pouvez append l’atsortingbut de style ou append une définition pour la balise d’entrée dans un fichier css.

Option 1: ajout de l’atsortingbut de style

  

Option 2: définition en css

 input{ width: 100px } 

Vous pouvez changer le 100px en auto

J’espère que je pourrais aider.

Si vous souhaitez simplement réduire ou augmenter la largeur des éléments d’entrée de Bootstrap à votre goût, j’utiliserais max-width dans le CSS.

Voici un exemple très simple que j’ai créé:

  

J’ai défini la largeur maximale du formulaire à 500px. De cette façon, vous n’aurez pas à utiliser le système de grid de Bootstrap et le formulaire restra réactif.

Je suis également confronté au même problème, et c’est ma solution.

Source HTML

 

Couvrir le code d’entrée avec une autre classe div

Source CSS

 .input_width{ width: 450px; } 

donne toute largeur ou paramètre de marge sur la classe div couverte.

La largeur d’entrée de Bootstrap est toujours 100% par défaut, donc la largeur est la largeur couverte.

Ce n’est pas la meilleure solution, mais la solution la plus simple et la plus simple que j’ai résolue.

J’espère que cela a aidé.

Bootstrap 3 J’ai réalisé une mise en page de formulaire sensible en utilisant les éléments suivants:

 

Je ne sais pas pourquoi tout le monde semble avoir oublié le fichier site.css dans le dossier de contenu. Regardez la ligne 22 dans ce fichier et vous verrez les parameters de l’entrée à contrôler. Il semblerait que votre site ne fasse pas référence à cette feuille de style.

J’ai ajouté ceci:

input, select, textarea { max-width: 280px;}

à votre violon et ça marche très bien.

Vous ne devriez jamais mettre à jour bootstrap.css ou bootstrap.min.css. Cela vous mettra en échec lorsque le bootstrap sera mis à jour. C’est pourquoi le fichier site.css est inclus. C’est là que vous pouvez apporter des modifications au site qui vous donneront toujours le design réactif que vous recherchez.

Voici le violon qui fonctionne

Ajoutez et définissez les termes du style="" dans le champ de saisie, c’est la manière la plus simple de procéder: Exemple:

 

Bootstrap utilise la classe «form-input» pour contrôler les atsortingbuts des «champs de saisie». Ajoutez simplement votre propre classe ‘form-input’ avec la largeur, la bordure, la taille de texte, etc. désirées dans votre fichier css ou votre section head.

(ou bien, ajoutez directement le code en ligne size = ‘5’ dans les atsortingbuts d’entrée de la section body.)