Diminuer la taille du champ de saisie Twitter Bootstrap?

Dans ma forme, je voudrais diminuer la hauteur de mon champ de saisie.

Je sais qu’il existe de petites classes d’entrée-support qui contrôlent la largeur du champ de saisie, mais y a-t-il quelque chose de similaire pour contrôler la hauteur?

Je ne pouvais pas en trouver et s’il n’y a pas comment puis-je contourner les défauts?

Je ne pouvais pas en trouver et s’il n’y a pas comment puis-je contourner les défauts?

La hauteur du champ d’entrée de Bootstrap est définie à l’aide des sélecteurs d’atsortingbuts, par exemple input[type="text"], input[type="password"]

Vous pouvez le remplacer par vos styles au même format de sélecteur ou utiliser des classes et autres.

 .mystyle input[type="text"] { height: 14px; font-size: 10px; line-height: 14px; } 

Selon le doc Bootstrap: Bootstrap CSS , vous devez utiliser .input-sm

Si vous écrivez votre propre CSS, vous ne tirez pas vraiment parti de la puissance de Bootstrap.

  

Il change simplement la propriété de height comme mentionné par @Neps

Mais, j’ai dû remplacer le .input-sm dans mon propre CSS pour obtenir le bon dimensionnement.

Je préfère simplement utiliser les classes Bootstrap où cela est possible.

Oui, il existe des classes pour contrôler la hauteur. Vous pouvez lire à leur sujet ici .

 input-lg input-sm 

Je suggère d’apprendre à utiliser un compilateur LESS ou SASS pour vos fichiers bootstrap et de télécharger les fichiers LESS / SASS avec Bootstrap. Ce n’est pas très difficile et c’est vraiment la façon dont vous êtes “censé” personnaliser Bootstrap. Il peut être un peu lourd pour un ou deux réglages, mais pour des choses comme le jeu de couleurs global ou le contrôle de grid / entrée, l’espacement et le remplissage sont bien meilleurs car les variables LESS sont universelles et peuvent s’appliquer à des choses que vous ne voudriez pas. t penser à passer outre. Par exemple, vous devriez décorer toutes vos entrées avec la classe “form-control”. Les classes “form-control” et “output” sont définies dans le fichier: forms.less, et la hauteur du champ est basée sur de nombreuses variables.

 .form-control { display: block; width: 100%; height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; line-height: @line-height-base; color: @input-color; background-color: @input-bg; background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid @input-border; border-radius: @input-border-radius; // Note: This has no effect on  

Toutes les variables sont définies dans un seul fichier, facile à utiliser, et les modifications apscopes affectent tout. Voici un exemple:

 //== Components // //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). @padding-base-vertical: 6px; @padding-base-horizontal: 12px; @padding-large-vertical: 10px; @padding-large-horizontal: 16px; @padding-small-vertical: 5px; @padding-small-horizontal: 10px; @padding-xs-vertical: 1px; @padding-xs-horizontal: 5px; @line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome @line-height-small: 1.5; @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; //** Global color for active items (eg, navs or dropdowns). @component-active-color: #fff; //** Global background color for active items (eg, navs or dropdowns). @component-active-bg: @brand-primary; //** Width of the `border` for generating carets that indicate dropdowns. @caret-width-base: 4px; //** Carets increase slightly in size for larger components. @caret-width-large: 5px; 

Si une nouvelle version de BS est publiée, il vous suffit d’appliquer vos anciennes variables aux nouveaux fichiers BS à l’aide du compilateur.

Liens: http://getbootstrap.com/customize/

http://lesscss.org/

Utilisateurs de Visual Studio: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebComstackr