減少引導表單組件之間的高度

Question

我使用Twitter的引導和它的表單組件：

http://twitter.github.com/bootstrap/base-css.html#forms

如何減少兩個組件之間的垂直距離，也使他們更小？

實施例：在上面的鏈路，在「驗證狀態」，如何減少之間的間隙「輸入與警告」行和「輸入與錯誤」行，以及如何降低文本輸入的高度？

Answer 1

如果您想要將標籤更靠近輸入，則需要更改寬度。

.form-horizontal .control-label { 
    width:160px; 
} 

要更改輸入的高度，您需要更改此選擇器的「高度」屬性。

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { 
    height:20px; 
} 

要降低行之間的高度，您需要更改行的邊距。

.form-horizontal .control-group { 
    margin-bottom:20px; 
} 

這些是在bootstrap.css中使用的默認樣式。如果你想重寫這些，我會建議在你的頁面上設置一個頂級的課程。這樣，您就可以覆蓋默認值不重寫bootstrap.css文件...

Answer 2

對於表單驗證改變這一規則在CSS

.form-horizontal .control-group { 
    margin-bottom: 20px; 
} 

爲了找到這些，在Chrome瀏覽器（或Firefox使用Firebug）右鍵單擊上面該鏈接中的元素。從列表中選擇檢查元素。然後在打開的屬性檢查器中（元素選項卡將鼠標懸停在項目上，直到找到顯示要更改的屬性的項目爲止），在這種情況下，它是具有「控制組警告」類型的潛水單擊該元素並單擊在檢查員的右邊會顯示相關的CSS規則，然後你可以搜索你的CSS並修改規則，你也可以在檢查員中實際更改它，並在你正在檢查的頁面上看到結果