Twitter Bootstrap附加跨度輸入大於請求的列寬度

Question

我想使用以下引導代碼來排列同一行上的輸入字段。附加字符串我用作字段添加寬度傳遞兩列跨度單位。

<div class="row"> 
    <h5 class="span2">Temperature</h5> 
    <h5 class="span2">Length</h5> 
    <h5 class="span2">Weight</h5> 
    </div> 
    <div class="row"> 
    <div class="span2"> 
     <div class="input-append"> 
     <input class="span2" type="text"><span class="add-on">&deg;C</span> 
     </div> 
    </div> 
    <div class="span2"> 
     <div class="input-append"> 
     <input class="span2" type="text"><span class="add-on">m</span> 
     </div> 
    </div> 
    <div class="span2"> 
     <div class="input-append"> 
     <input class="span2" type="text"><span class="add-on">kg</span> 
     </div> 
    </div> 
    </div> 

問題：有一種方法來擠壓輸入字段的寬度，使得場與所附的字符組合的符合給定的列跨度內？

此外，我重複類=「span N」頻繁在代碼中看起來臃腫。任何建議，幹起來也會很好。

Answer 1

而不是使用class="span2"您的輸入字段，你可以嘗試class="input-small" 像

<div class="span2"> 
     <div class="input-append"> 
     <input class="input-small" type="text"><span class="add-on">&deg;C</span> 
     </div> 
</div> 

如您所期望這會擠壓輸入字段的寬度..