將兩個不同寬度的輸入組相互對齊

Question

我想要對齊2個輸入組，其中一個使用跨度爲8 &其他使用4彼此相鄰。我使用內聯形式，但它不佔用預期的寬度。

<div class="form-inline"> 
    <div class="form-group"> 
     <!-- <div class="input-group"> --> 
      <input type="text" class="form-control col-sm-8" placeholder="Username"> 
     <!-- </div> --> 
    </div> 
    <div class="form-group"> 
     <!-- <div class="input-group"> --> 
      <input type="text" class="form-control col-sm-4" placeholder="Ref No."> 
    </div> 
</div> 

Answer 1

玩耍後，我發現這個解決方案：

HTML

<div class="row form-input"> 
    <div class="col-sm-8"> 
     <input type="text" class="form-control" placeholder="Username"> 
    </div> 
    <div class="col-sm-4"> 
     <input type="text" class="form-control" placeholder="ref no."> 
    </div> 
</div> 
<div class="row form-input"> 
    <div class="col-sm-6"> 
     <input type="text" class="form-control" placeholder="Monthly Rent"> 
    </div> 
    <div class="col-sm-6"> 
     <input type="text" class="form-control" placeholder="Deposit"> 
    </div> 
</div> 

CSS

.form-input, .form-input input{ 
    margin-top: 10px; 
} 

Answer 2

嘗試下面的CSS

.form-group{ 
     float:left; 
    }