この奇妙なパディングをブートストラップ形式で修正するにはどうすればいいですか？

Question

<form class="form-inline"> 
    <div class="form-group"> 
     <div class="input-daterange input-group" id="datepicker"> 
      <label>From:</label> 
      <input type="text" class="input-sm form-inline" name="start" /> 
      <span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="input-daterange input-group" id="datepicker"> 
      <label>To:</label> 
      <input type="text" class="input-sm form-inline" name="end" /> 
      <span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span> 
     </div> 
    </div> 
</form> 

私は入力のためのクラス= "フォームコントロール" を変更したときに、それはOKになりますが、それはまた、フォーム全体のサイズを変更:(

Answer 1

解決：

<form class="form-inline"> 
    <div class="form-group"> 
     <div class="input-daterange" id="datepicker"> 
      <span>From:</span> 
      <div class="input-group"> 
       <input type="text" class="input-sm form-inline" name="start"/> 
       <span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="input-daterange" id="datepicker"> 
      <span>To:</span> 
      <div class="input-group"> 
       <input type="text" class="input-sm form-inline" name="end"/> 
       <span class="input-group-addon"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i></span> 
      </div> 
     </div> 
    </div> 
</form> 

を