Выравнивание Prepend/Append текстовых полей в 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

JSfiddle Jsfiddle with example

Для выравнивания входов и этикетки правильно сделать следующее: -
1. Оберните этикетки и элементы управления в .control-group ,
2. Добавить .control-label на этикетку
3. Оберните любые связанные элементы управления в .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>