同じ行のブートストラップフィールド

Question

私の「終了日」フィールドが「雇用日」と同じ行にない理由は誰にも分かりますか？上記のすべてのフィールドと同じルールに従っていますか？

<h1>Employee</h1> 
<fieldset> 
    <h2>Employee Information</h2> 
    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Name</label> 
       <input id="name" name="name" type="text" class="form-control required"> 
      </div> 
      <div class="form-group"> 
       <label>Date</label> 
       <input id="todaysDate" name="todaysDate" type="text" class="form-control required"> 
      </div> 
     </div> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Job Title</label> 
       <input id="title" name="title" type="text" class="form-control required email"> 
      </div> 
      <div class="form-group"> 
       <label>Department</label> 
       <input id="department" name="department" type="text" class="form-control"> 
      </div> 
     </div> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Date Hired</label> 
       <input id="hiredDate" name="hiredDate" type="text" class="form-control required email"> 
      </div> 
      <div class="form-group"> 
       <label>Termination Date</label> 
       <input id="termDate" name="termDate" type="text" class="form-control"> 
      </div> 
     </div> 
    </div> 
</fieldset> 

Answer 1

あなたしている構造は、あなたがあなたのコードがあるべき望むものを達成するために、間違っている：

<h1>Employee</h1> 
<fieldset> 
    <h2>Employee Information</h2> 
    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Name</label> 
       <input id="name" name="name" type="text" class="form-control required"> 
      </div> 
      <div class="form-group"> 
       <label>Date</label> 
       <input id="todaysDate" name="todaysDate" type="text" class="form-control required"> 
      </div> 
      <div class="form-group"> 
       <label>Date Hired</label> 
       <input id="hiredDate" name="hiredDate" type="text" class="form-control required email"> 
      </div> 
     </div> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Job Title</label> 
       <input id="title" name="title" type="text" class="form-control required email"> 
      </div> 
      <div class="form-group"> 
       <label>Department</label> 
       <input id="department" name="department" type="text" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <label>Termination Date</label> 
       <input id="termDate" name="termDate" type="text" class="form-control"> 
      </div> 
     </div> 
    </div> 
</fieldset> 

この方法であなたは2列（と1行を持っています1つの列につき3つの入力）ですので、折りたたまれている場合、最初の列の要素は2番目の列の要素の前に表示されます（は正しい要素の前に左の要素）。

しかし、崩壊したときに、あなたが一番下のもの前トップの要素を表示する必要がある場合は、あなたのような何かやりたいことがあります。

<h1>Employee</h1> 
<fieldset> 
    <h2>Employee Information</h2> 

    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Name</label> 
       <input id="name" name="name" type="text" class="form-control required"> 
      </div> 
      <div class="form-group"> 
       <label>Job Title</label> 
       <input id="title" name="title" type="text" class="form-control required email"> 
      </div> 
     </div> 
     <div class="col-lg-6"> 

     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Date</label> 
       <input id="todaysDate" name="todaysDate" type="text" class="form-control required"> 
      </div> 
     </div> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Department</label> 
       <input id="department" name="department" type="text" class="form-control"> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Date Hired</label> 
       <input id="hiredDate" name="hiredDate" type="text" class="form-control required email"> 
      </div> 
     </div> 
     <div class="col-lg-6"> 
      <div class="form-group"> 
       <label>Termination Date</label> 
       <input id="termDate" name="termDate" type="text" class="form-control"> 
      </div> 
     </div> 
    </div> 

</fieldset> 

をそして、あなたは2列毎に3行を持っています（1列当たりの入力）。