在引导程序中对齐Prepend / Append文本框

时间:2013-02-18 22:23:49

标签: twitter-bootstrap tablecell

我不能为我的生活弄清楚如何在表格单元格中排列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>

1 个答案:

答案 0 :(得分:0)

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