フォームインラインでラベルとテキストボックスを整列する

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

あなたは、この構造を作る必要があります。これは、グリッドシステム

See bootply