twitter-bootstrap - 输入大于请求的列宽的 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>

问题：有没有办法压缩输入字段的宽度，以便与附加字符组合的字段适合给定的列跨度？

另外，我在看起来臃肿的代码中经常重复 class="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>

这将根据您的需要挤压输入字段的宽度..