標籤上方輸入的自舉內聯表格

Question

我想創建一個內聯表格，使用標籤上方的輸入文本字段的引導，但結果看起來很混亂。
這是我的嘗試：

<form id="form" method="post" class="form-inline" > 
    <div class="row"> 
    <div class="col-md-2">    
     <label for="from">from:</label> 
     <input type="text" class="form-control form-text" /> 
    </div> 
    <div class="col-md-2"> 
     <label for="to">to:</label> 
     <input type="text" class="form-control form-text"/> 
    </div> 
    <div class="input-group date col-md-2" id="datepicker"> 
     <label for="checkin">check in</label> 
     <input type="text" class="form-control datepicker" name="processdate" /> 
     <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span> 
    </div> 
    <div class="input-group date col-md-2" id="datepicker"> 
     <label for="checkout">check out</label> 
     <input type="text" class="form-control datepicker" name="processdate" /> 
     <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span> 
    </div> 
    <div class="col-md-2"> 
     <input type="submit" class="btn btn-default" value="submit"/> 
    </div> 
    </div> 
</form> 

這是我的了：
result
如何獲得提交按鈕右邊的位置和glyphicons高度一樣的輸入字段我是什麼做錯了？

Answer 1

我做了一些編輯您的HTML：https://jsfiddle.net/05t4s041/

<form id="form" method="post" class="form-inline" > 
    <div class="row"> 
    <div class="col-md-2">    
     <label for="from">from:</label> 
     <input type="text" class="form-control form-text" /> 
    </div> 
    <div class="col-md-2"> 
     <label for="to">to:</label> 
     <input type="text" class="form-control form-text"/> 
    </div> 
    <div class="col-md-2"> 
     <label for="checkin">check in</label> 
     <div class="input-group date" id="datepicker"> 
     <input type="text" class="form-control datepicker" name="processdate" /> 
     <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <label for="checkout">check out</label> 
     <div class="input-group date" id="datepicker"> 
     <input type="text" class="form-control datepicker" name="processdate" /> 
     <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span> 
     </div> 
    </div> 
    <div class="col-md-2"> 
     <input type="submit" class="btn btn-default" value="submit"/> 
    </div> 
    </div> 
</form> 

Answer 2

你可以把自舉類的div周圍的標籤，就像控制：

 <div class="col-md-2">  
     <div class="row">  
      <div class="col-md-6">   
       <label for="from">from:</label> 
      </div> 
      <div class ="col-md-6"> 
       <input type="text" class="form-control form-text" /> 
      </div> 
     </div> 
    </div> 

行格可能就足夠了：它把在一個行元素把我喜歡把多餘的自舉類在我的控制，使我可以修改它們。例如，標籤的寬度小於控件本身的寬度。