Twitter bootstrap 在引导中对齐前置/追加文本框

我一辈子都不知道如何在一个表格单元格中最多排列两个前置和追加的文本框。有人成功地做到了这一点吗？我搞乱了显示、浮动和宽度选项

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

美元
% 

JSfiddle

要正确对齐输入和标签，请执行以下操作：-
1.在

控制组中包装标签和控件
2.将
控件标签添加到标签

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>


美元
美元
百分比
% 
为什么它们位于表格单元格中？桌子周围有表单标签吗？两个包含div的部分都必须向左浮动，我想应该是水平排列。显然，表格单元格需要有足够的宽度来容纳两个输入。通常，除非显示的是表格日期，否则不应使用表格进行布局。