html - 在输入上方带有标签的 Bootstrap 内联表单

Question

我想使用 bootstrap 创建一个内联表单，标签位于输入文本字段上方，但结果看起来一团糟。
这是我尝试过的:

<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
我如何让提交按钮到正确的位置并且字形高度与输入字段相同我做错了什么？

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>