Twitterのブートストラップ入力フィールドの高さを減らしますか？

Question

私のフォームでは、入力フィールドの高さを小さくしたいと思います。

私は入力フィールドの幅を制御するinput-small、input-mediumクラスがあることを知っていますが、高さを制御するための類似点はありますか？

デフォルトを上書きするにはどうすればいいですか？

Answer 1

デフォルトを上書きするにはどうすればいいですか？

ブートストラップの入力フィールドの高さは、属性セレクタを使用して定義されます。 input[type="text"], input[type="password"]

スタイルを同じセレクタ形式で上書きすることも、クラスなどを使用することもできます。ブートストラップドキュメントによると

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

Answer 2

：Bootstrap CSS、あなたはあなた自身のCSSを記述するつもりなら、あなたは本当にブートストラップの力を活用していません.input-sm

を使用する必要があります。

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

@Neps

で述べたようにそれはちょうどheightプロパティを変更します。しかし、私はサイズが権利を取得するために私自身のCSSで.input-smを上書きしなければなりませんでした。

可能であれば、ブートストラップクラスを使用することをお勧めします。

Answer 3

はい、高さを制御するクラスがあります。あなたはそれらについてhereを読むことができます。

input-lg 
input-sm 

Answer 4

私はあなたのブートストラップファイルに対してLESSやSASSコンパイラを使用して、ブートストラップと一緒にLESS/SASSファイルをダウンロードすることを学ぶことをお勧め。それは非常に難しいことではなく、あなたがブートストラップをカスタマイズするために "想定されている"方法です。 1つまたは2つの微調整のために少し重いかもしれませんが、全体の配色やグリッド/入力コントロールの間隔やパディングのようなものでは、LESS変数が普遍的であり、上書きすると思う。 たとえば、すべての入力を "form-control"クラスで飾る必要があります。 「コントロールフォーム」と「出力」のクラスは、ファイルに定義されています。それをチェックアウトforms.less、およびフィールドの高さは、多くの変数に基づいています。

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

変数のすべてがで定義されています単一の、ファイルでの作業が容易であり、そこで行われた変更はすべてに影響します。

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

BSの新しいバージョンがリリースされた場合、コンパイラを使用して新しいBSファイルに古い変数を適用するだけです。

リンク： http://getbootstrap.com/customize/

http://lesscss.org/

のVisual Studioユーザー： https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler