Diminuisce l'altezza del campo di immissione Bootstrap di Twitter?

Question

Nella mia forma vorrei ridurre l'altezza del campo di input.

So che ci sono classi input-small, input-medium che controllano la larghezza del campo di input, ma esiste qualcosa di simile per il controllo dell'altezza?

Non sono riuscito a trovarne e se non è possibile ignorare le impostazioni predefinite?

Answer 1

Non sono riuscito a trovarne e se non è possibile ignorare le impostazioni predefinite?

L'altezza del campo di immissione del bootstrap viene definita mediante selettori di attributo, ad es. input[type="text"], input[type="password"]

È possibile sovrascriverlo con i propri stili nello stesso formato di selezione o utilizzare classi e simili.

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

Answer 2

Secondo il doc Bootstrap: Bootstrap CSS, si consiglia di utilizzare .input-sm

Se avete intenzione di scrivere il proprio CSS, non siete veramente sfruttando la potenza di Bootstrap.

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

Cambia semplicemente la proprietà height come detto da @Neps

Ma, ho dovuto ignorare il .input-sm nel mio CSS per ottenere il giusto dimensionamento.

Preferisco semplicemente utilizzare le classi Bootstrap dove mai possibile.

Answer 3

Sì, ci sono classi per il controllo dell'altezza. Puoi leggere su di loro here.

input-lg 
input-sm 

Answer 4

Vorrei suggerire imparare ad usare un compilatore o meno SASS per i file di bootstrap, e scaricare i file MENO/SASS con Bootstrap. Non è molto difficile ed è davvero il modo in cui si "suppone" di personalizzare Bootstrap. Potrebbe essere un po 'pesante per uno o due tweaks, ma per cose come la combinazione di colori o griglia/input e spaziatura di controllo è davvero molto meglio in quanto le variabili LESS sono universali e potrebbero applicarsi a cose che non vorresti t pensare di scavalcare. Ad esempio, dovresti decorare tutti i tuoi input con la classe "form-control". La "forma-control" e le classi di "uscita" sono definiti nel file: forms.less, e l'altezza del campo si basa su molte variabili controllano fuori:

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

Tutte le variabili sono definite in un singolo, facile da lavorare con il file, e le modifiche apportate lì influenzano tutto. Ecco un esempio:

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

Se una nuova versione di BS viene fuori, si applica semplicemente le vostre vecchie variabili per i nuovi file BS usando il compilatore.

vicini: http://getbootstrap.com/customize/

http://lesscss.org/

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