Question

我正在尝试使用以下Bootstrap代码排列同一行的输入字段。我在字段上使用的附加字符串添加宽度传递两个列跨度。

  <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>

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

Twitter Bootstrap附加跨度，输入大于请求的列宽

1 个答案: