以内嵌形式对齐标签和文本框

Question

我正在使用引导程序的网格系统并希望创建一个内联表单。

以下是我有：

<div class="container body-content"> 

    <form class="well form-inline" style="width: 100%;"> 

    <div class="row"> 
     <div class="form-group col-md-4"> 
      <label>Location:</label> 
      <input type="text" class="form-control"> 
     </div> 


     <div class="form-group col-md-4"> 
      <label>Assignment:</label> 
      <input type="text" class="form-control"> 
     </div> 

     <div class="form-group col-md-4"> 
      <label>Incident Number:</label> 
      <input type="text" class="form-control"> 
     </div> 
    </div> 

    <br> 
    <br> 

    <div class="row"> 
     <div class="form-group col-md-4"> 
      <label>Date:</label> 
      <input type="text" class="form-control"> 
     </div> 

     <div class="form-group col-md-4"> 
      <label>Training:</label> 
      <input type="text" class="form-control"> 
     </div> 

     <div class="form-group col-md-4"> 
      <label>Example:</label> 
      <input type="text" class="form-control"> 
     </div> 
    </div> 

</form> 

</div> 

当这是跑，有一个文本框或标签没有结构或对齐。我怎样才能做到这一点？

Here is a bootply

Answer 1

对于每一个标签，并输入你应该让这样的结构：

<div class="form-group col-md-4"> 
    <label class="col-lg-4 control-label">Location:</label> 
    <div class="col-lg-8"> 
      <input type="text" class="form-control"> 
    </div> 
</div> 

这将使其与电网系统

See bootply