引導2.3.2形式，內聯形式的對準寬度控制

Question

我試圖建立一種結構如以下

金額對照組中的給定的屏幕的形狀具有三個輸入元素，但右最後一個元素的邊緣必須與頻率對象的輸入對齊。

我不能在bootstrap中設置它，任何人都可以幫助我嗎？

代碼在這裏：

<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

我已經改變類名 「輸入小」 到 「輸入迷你」

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