減少Twitter Bootstrap輸入字段的高度？

在我的表單中，我想減少輸入字段的高度。減少Twitter Bootstrap輸入字段的高度？

我知道有控制輸入字段寬度的輸入小型輸入媒體類，但有沒有類似的控制高度的東西？

我找不到任何，如果沒有如何去重寫默認值？

來源

2012-12-06 Shakeeb Ahmad

沒有內置這一類。 –

@ScottSimpson - 現在有這樣的課程。 http://getbootstrap.com/css/#forms-control-sizes – Chris

我找不到任何，如果沒有如何去重寫默認值？

引導程序的輸入字段高度使用屬性選擇器來定義，例如， input[type="text"], input[type="password"]

您可以用相同選擇器格式的樣式覆蓋它，或者使用類和類。

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

來源

2012-12-07 01:34:14 Neps

工作。謝謝！ –

input.mystyle [type =「text」] {...} –

根據所述引導DOC：Bootstrap CSS，你應該使用.input-sm

如果你打算寫自己的CSS，你是不是真的採取引導的力量優勢。

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

它只是改變了height財產爲@Neps

提及，但，我不得不重寫.input-sm在我自己的CSS得到上漿權利。

我只是希望儘可能使用Bootstrap類。

來源

2014-05-30 15:59:15

我想知道這有什麼意義。它相當於爲您的表單輸入硬編碼像素的高度和行高。爲什麼我們需要Bootstrap？它不以任何方式「響應」; .input-whatever-size-you-set對於所有屏幕尺寸將保持不變... – Pere

當您構建網站時，通常需要輸入框具有一致的CSS，以便在整個網站中看起來相似。 Bootstrap通過爲所有網站開發人員同意使用的漂亮外觀控件提供一致的佈局來爲此提供幫助。您可以構建自己的'.myInputStyle'，然後團隊中的每個開發人員都必須知道它，並記住除了Bootstrap類之外，還要使用它。但是，如果您只是修改'input-sm'，您可以自動擁有已經使用該類的所有輸入框，請使用此新樣式。它只是使維護更容易。 –

當我開始使用Bootstrap時，我已經擁有了「輸入框一致的CSS」和其他表單控件，這些控件已經包含在設計人員的工作中。我開始使用'col - * - *'類，因爲它們對於網格系統有意義。在這些表單類的情況下，我只是沒有看到使用Bootstrap的要點，如果它們不提供我已有的功能或任何簡單的css模板的功能。有爭議的是，它使得更容易。如果你想改變它們，你必須重寫Bootstrap樣式;這是開銷。 – Pere

是的，有控制高度的類。你可以閱讀關於他們here。

input-lg 
input-sm

來源

2014-11-13 20:08:45 Chris

我建議學習使用小於或SASS編譯器爲你的引導文件，並下載LESS/SASS文件自舉一起。這不是非常困難，而且實際上是您「自定義」定製Bootstrap的方式。對於一兩次調整可能有點過分，但對於整體顏色方案或網格/輸入控件間距和填充等事情來說，它確實好得多，因爲LESS變量是普遍的，並且可能適用於您不想要的東西，我認爲可以重寫。例如，你應該用「表格控制」類來裝飾你的所有輸入。「形控制」和「輸出」的類文件中定義：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

來源

2016-12-27 17:30:44

減少Twitter Bootstrap輸入字段的高度？

回答

相關問題