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> 

如您所期望这会挤压输入字段的宽度..