3

次の Bootstrap コードを使用して、入力フィールドを同じ行に並べようとしています。フィールドの単位として使用している追加文字列は、幅を 2 ​​列のスパンに追加します。

  <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 " を頻繁に繰り返しています。それを乾かすことに関する提案も素晴らしいでしょう.

4

1 に答える 1

3

入力フィールドに使用する代わりに、次の よう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>

これにより、必要に応じて入力フィールドの幅が縮小されます..

于 2012-12-13T09:18:02.553 に答える