Die Höhe des Twitter-Bootstrap-Eingabefelds verringern?

Question

In meinem Formular möchte ich die Höhe meines Eingabefeldes verringern.

Ich weiß, es gibt Input-small, Eingabemedium-Klassen, die Eingabefeldbreite steuern, aber gibt es etwas ähnliches für die Kontrolle der Höhe?

Ich konnte keine finden und wenn es nicht geht, wie gehe ich über das Überschreiben der Standardeinstellungen?

Answer 1

Ich konnte keine finden und wenn es nicht geht, wie gehe ich über das Überschreiben der Standardeinstellungen hinaus?

Die Eingabefeldhöhe des Bootstrap wird mithilfe von Attributselektoren definiert, z. input[type="text"], input[type="password"]

Sie können es mit Ihren Stilen im selben Selektorformat überschreiben oder Klassen und ähnliches verwenden.

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

Answer 2

Nach dem doc Bootstrap: Bootstrap CSS, sollten Sie .input-sm

verwenden Wenn Sie eine eigene CSS schreiben wollen, sind Sie wirklich nicht die Vorteile der Kraft der Bootstrap nehmen.

<input class="form-control input-sm" type="text" placeholder=".input-sm"> 

Es ändert sich nur die height Eigenschaft als von @Neps erwähnt

Aber ich hatte die .input-sm in meinem eigenen CSS außer Kraft zu setzen, die Sizing richtig zu machen.

Ich bevorzuge nur die Bootstrap-Klassen wo immer möglich.

Answer 3

Ja, es gibt Klassen zur Kontrolle der Höhe. Sie können über sie here lesen.

input-lg 
input-sm 

Answer 4

Ich würde vorschlagen, das Erlernen einer LESS oder SASS-Compiler für Ihre Bootstrap-Dateien zu verwenden, und laden Sie die LESS/SASS-Dateien zusammen mit Bootstrap. Es ist nicht sehr schwierig und ist wirklich die Art, wie Sie Bootstrap "anpassen" sollen. Es kann ein wenig schwer für ein oder zwei zwickt, aber für Dinge wie das allgemeine Farbschema oder Raster/Eingabe-Steuerelement Abstand und Polsterung ist es wirklich viel besser, da die Variablen LESS universell sind und möglicherweise für Dinge gelten, die Sie nicht würden Ich denke, um zu überschreiben. Zum Beispiel sollten Sie alle Ihre Eingaben mit der "Form-Control" -Klasse dekorieren. Die „Form-control“ und „Output“ Klassen werden in der Datei definiert: forms.less und die Höhe des Feldes basiert auf vielen Variablen, check it out:

.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 <select>s in some browsers, due to the limited stylability of <select>s in CSS. 
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); 

    ...more stuff I removed... 
    } 

Alle Variablen sind definiert in eine einzige, einfach zu bearbeitende Datei, und dort vorgenommene Änderungen wirken sich auf alles aus. Hier ist ein Beispiel:

//== 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 (e.g., navs or dropdowns). 
@component-active-color: #fff; 
//** Global background color for active items (e.g., 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; 

Wenn eine neue Version von BS herauskommt, Sie einfach Ihre alte Variablen auf die neuen BS-Dateien mit dem Compiler gelten.

Links: http://getbootstrap.com/customize/

http://lesscss.org/

Visual Studio Benutzer: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler