Bootstrap 2.3.2表单，对齐内联表单控件的宽度

Question

我正在尝试构建一个具有下面屏幕中给出的结构的表单

金额控制组有三个输入元素，但最后一个元素的右边缘必须与频率对象的输入对齐。

我无法以某种方式在引导程序中制作它，有人可以帮助我吗？

代码在这里：

<form class="form-horizontal">
   <div class="control-group">
      <label class="control-label" for="mDrugAmount">Amount </label>
      <div class="controls">
         <input class="input-small" data-bind="value: Dose" type="text">
         <select class="input-mini">
            <option value="">  </option>
            <option value="">mg</option>
            <option value="">mL</option>
         </select>
         <select class="input-mini">
            <option value="">  </option>
            <option value="">IM</option>
            <option value="">IV</option>
            <option value="">subcut</option>
         </select>
      </div>
   </div>
   <div class="control-group">
      <label class="control-label" for="mDrugFrequency">Frequency </label>
      <div class="controls">
         <select>
            <option value="">  </option>
            <option value="">4 hourly</option>
            <option value="">6 hourly</option>
            <option value="">8 hourly</option>
            <option value="">alto die</option>
            <option value="">bd</option>
            <option value="">bd</option>
            <option value="">daily</option>
            <option value="">infusion</option>
            <option value="">mane</option>
            <option value="">nocte</option>
            <option value="">qid</option>
            <option value="">tds</option>
            <option value="">weekly</option>
         </select>
      </div>
   </div>
   <div class="control-group">
      <label class="control-label" for="mCommenceDate">Commence </label>
      <div class="controls">
         <input type="text" >
      </div>
   </div>
   <div class="control-group">
      <label class="control-label" for="mPrescriptionDate">Until </label>
      <div class="controls">
         <input type="text" value="">
      </div>
   </div>
   <div class="control-group submit-row">
      <div class="control-label">
         <a href="#" class="btn" data-dismiss="modal" aria-hidden="true" data-bind="    click: $parent.changePrescription">Submit</a>
      </div>
      <div class="control-label">
         <a href="#" class="btn" data-dismiss="modal" aria-hidden="true" data-bind="click: $parent.ceasePrescription">Cease</a>
      </div>
      <div class="control">
      </div>
   </div>
</form>

这是我的JSFiddle - http://jsfiddle.net/az6zpha3/1/

Answer 1

我更新了小提琴

http://jsfiddle.net/az6zpha3/6/

如果类名与引导程序冲突，则可以更改类名称

.form-horizontal{
    width:400px;
}

.input-mini{
   min-width:30%;
}

HTML

我更改了班级名称＆＃34;输入 - 小＆＃34;到＆＃34;输入迷你＆＃34;

<form class="form-horizontal" _lpchecked="1">
    <div class="control-group">
        <label class="control-label" for="mDrugAmount">Amount </label>
        <div class="controls">
            <input class="input-mini" data-bind="value: Dose" type="text">
            <select class="input-mini"><option value="">  </option><option value="">mg</option><option value="">mL</option></select>
            <select class="input-mini"><option value="">  </option><option value="">IM</option><option value="">IV</option><option value="">subcut</option></select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="mDrugFrequency">Frequency </label>
        <div class="controls">
            <select><option value="">  </option><option value="">4 hourly</option><option value="">6 hourly</option><option value="">8 hourly</option><option value="">alto die</option><option value="">bd</option><option value="">bd</option><option value="">daily</option><option value="">infusion</option><option value="">mane</option><option value="">nocte</option><option value="">qid</option><option value="">tds</option><option value="">weekly</option></select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="mCommenceDate">Commence </label>
        <div class="controls">
            <input type="text" >
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="mPrescriptionDate">Until </label>
        <div class="controls">
            <input type="text" value="">
        </div>
    </div>

    <div class="control-group submit-row">
        <div class="control-label">
            <a href="#" class="btn" data-dismiss="modal" aria-hidden="true" data-bind="    click: $parent.changePrescription">Submit</a>
        </div>
        <div class="control-label">
            <a href="#" class="btn" data-dismiss="modal" aria-hidden="true" data-bind="click: $parent.ceasePrescription">Cease</a>
        </div>

        <div class="control">
        </div>
    </div>
</form>