以內嵌形式對齊標籤和文本框

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