두 개의 입력 그룹을 서로 다른 너비로 정렬하십시오.

Question

두 개의 입력 그룹을 하나의 스팬 8 & 다른 네 개의 다른 그룹과 나란히 정렬하고 싶습니다. 양식을 인라인으로 사용했지만 의도 한 너비를 사용하지 않습니다.

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