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

JSfiddle Jsfiddle 与示例

要正确对齐输入和标签，请执行以下操作：-
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>