输入上方带有标签的引导内联表单

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

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>

行 div 可能就足够了：它将元素放在一行中 我喜欢在我的控件周围放置额外的引导类，以便我可以修改它们。例如标签的宽度小于控件本身的宽度。