如何解決這個奇怪的填充自舉形式？

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> 

當我改變類= 「形控制」 輸入，這將是確定的，但它也改變整體形式:(

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>