Zmniejsz wysokość pola wprowadzania Bootstrap na Twitterze?

Question

W mojej formie chciałbym zmniejszyć wysokość pola wejściowego.

Wiem, że istnieją małe wejściowe klasy wejściowe, które kontrolują szerokość pola wejściowego, ale czy istnieje coś podobnego do sterowania wysokością?

Nie mogłem znaleźć żadnych i jeśli nie ma sposobu, jak obejść ustawienia domyślne?

Answer 1

Nie mogłem znaleźć żadnych i jeśli nie ma sposobu, jak obejść ustawienia domyślne?

Wysokość pola wprowadzania Bootstrap definiuje się za pomocą selektorów atrybutu, np. input[type="text"], input[type="password"]

Możesz zastąpić go swoimi stylami w tym samym formacie selektora lub używa klas i tym podobnych.

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

Answer 2

Według doc Bootstrap: Bootstrap CSS, należy użyć .input-sm

Jeśli masz zamiar napisać własny CSS, nie są naprawdę wykorzystanie mocy startowej.

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

To po prostu zmienia właściwość height jak wspomniano przez @Neps

Ale musiałem zastąpić .input-sm w moim CSS, aby uzyskać prawo doboru.

Po prostu wolę używać klas Bootstrap tam, gdzie to możliwe.

Answer 3

Tak, istnieją klasy do kontrolowania wysokości. Możesz przeczytać o nich here.

input-lg 
input-sm 

Answer 4

Proponuję nauki korzystania mniej lub Sass kompilatora dla bootstrap plików i pobieranie plików MNIEJ/Sass wraz z bootstrap. Nie jest to zbyt trudne i tak naprawdę należy "dostosować" Bootstrapa. Może to być trochę ciężkie dla jednej lub dwóch poprawek, ale dla rzeczy takich jak ogólny schemat kolorów lub odstępy kontrolne grid/input i dopełnienie to jest naprawdę dużo lepsze, ponieważ zmienne LESS są uniwersalne i mogą odnosić się do rzeczy, których nie chciałbyś ". Zastanawiają się nad tym. Na przykład powinieneś dekorować wszystkie wejścia za pomocą klasy "form-control". „Forma-control” i „wyjścia” klasy są zdefiniowane w pliku: forms.less, a wysokość tej dziedzinie oparta jest na wiele zmiennych, to sprawdzić:

.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... 
    } 

Wszystkie zmienne są określone w pojedynczy, łatwy do pracy z plikiem, a wprowadzone tam zmiany mają wpływ na wszystko. Oto przykład:

//== 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; 

Jeśli pojawi się nowa wersja BS, wystarczy zastosować stare zmienne w nowych plikach BS za pomocą kompilatora.

Linki: http://getbootstrap.com/customize/

http://lesscss.org/

wizualne użytkowników studio: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler