twitter-bootstrap - ブートストラップでのプリペンド/アペンドテキストボックスの整列

Question

表のセルに最大2つの先頭に追加されたテキストボックスを並べる方法を私は一生理解できません。誰かがこれをうまくやったことがありますか？表示、フロート、幅のオプションをいじりました...

<td class="success">
<div class="input-prepend">
   <span class="add-on"> USD $ </span>
    <input type="text" class="input-small pi-dollarchange">
 </div>
 <div class="input-append">
     <input type="text" class="input-small pi-perchange">
    <span class="add-on"> % </span>
  </div>
  </td>

Answer 1

JSfiddleJsfiddleと例

入力とラベルを正しく配置するには、次の手順を実行します。-
1。ラベルとコントロールをでラップし.control-groupます。2.ラベル
に追加します。3 。適切な位置合わせのため に、関連するコントロールをラップします。.control-label
.controls

<div class="control-group">
    <label class="control-label" for="inputDollars">Dollars</label>
    <div class="controls">
        <div class="input-prepend"> <span class="add-on"> USD $ </span>

            <input type="text" class="input-small pi-dollarchange"
            placeholder="dollar">
        </div>
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="inputPercentage">Percentage</label>
    <div class="controls">
        <div class="input-append">
            <input class="span2 pi-perchange" id="appendedInput" type="text" placeholder="percentage"> <span class="add-on"> % </span>

        </div>
    </div>
</div>