Bootstrap-Felder in derselben Zeile

Question

Weiß jemand, warum mein "Termination Date" -Feld nicht in der gleichen Zeile wie Date Hired läuft? Wenn ich die gleichen Regeln wie alle oben genannten Felder befolge?

<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

Sie sind Struktur ist falsch, um zu erreichen, was Sie Ihren Code wollen sein sollte:

<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> 

auf diese Weise haben Sie 1 Zeile mit 2 Spalten (3 Eingänge pro Spalte), wenn also die ersten Spaltenelemente vor der zweiten Spalte angezeigt werden (also linke Elemente vor den rechten).

Aber wenn im zusammengeklappten Zustand Sie die Top-Elemente vor den unter denjenigen zeigen müssen, können Sie so etwas wie zu tun:

<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> 

Und Sie werden 3 Reihen mit 2 Spalten je (1 haben Eingabe pro Spalte).