Bootstrap行和列與複選框和標籤對齊不正確

Question

我試圖讓我的複選框和標籤在我使用Bootstrap網格時正確對齊。在我的複選框之後有一個標籤之前，這似乎是非常好的。

下面是它看起來像在Firefox：

這是我的代碼：

<div id="view2"> 
    <div class="container-fluid center"> 
     <div class="row"> 
      <div class="col-xs-3"> 
       <label for="daysAvailable">Days Available</label> 
      </div> 
      <div class="col-xs-3"> 
       <label for="employmentDesired">Employment Desired</label> 
      </div> 
      <div class="col-xs-3"> 
       <label for="hoursWeekly">Hours Available Per Week</label> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-1"> 
       <input type="checkbox" id="allDays" /> 
       <label for="allDays">All</label> 
      </div> 
      <div class="col-xs-1"> 
       <input type="checkbox" id="monday" /> 
       <label for="monday">Mon</label> 
      </div> 
      <div class="col-xs-1"> 
       <input type="checkbox" id="tuesday" /> 
       <label for="tuesday">Tue</label> 
      </div> 
      <div class="col-xs-3"> 
       <input type="checkbox" id="fullTime" /> 
       <label for="fullTime">FullTime</label> 
      </div> 
      <div class="col-xs-3"> 
       <input type="text" id="hoursPerWeek" /> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-1"> 
       <input type="checkbox" id="wednesday"/> 
       <label for="wednesday">Wed</label> 
      </div> 
      <div class="col-xs-1"> 
       <input type="checkbox" id="thursday"/> 
       <label for="thursday">Thu</label> 
      </div> 
      <div class="col-xs-1"> 
       <input type="checkbox" id="friday"/> 
       <label for="friday">Fri</label> 
      </div> 
      <div class="col-xs-3"> 
       <input type="checkbox" id="partTime" /> 
       <label for="partTime">PartTime</label> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-1"> 
       <input type="checkbox" id="saturday"/> 
       <label for="saturday">Sat</label> 
      </div> 
      <div class="col-xs-1"> 
       <input type="checkbox" id="sunday"/> 
       <label for="sunday">Sun</label> 
      </div> 
     </div> 
     <br/> 

     <div class="row"> 
      <div class="col-xs-3"> 
       <label for="workNight">Can You Work Nights</label> 
      </div> 
      <div class="col-xs-3"> 
       <label for="beenFired">Have You Been Fired Before</label> 
      </div> 
      <div class="col-xs-3"> 
       <label for="dateAvailable">Date Available</label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-3"> 
       <input type="checkbox" id="workNightYes" /> 
       <label for="workNightYes">Yes</label> 
      </div> 
      <div class="col-xs-3"> 
       <input type="checkbox" id="yesFired"/> 
       <label for="yesFired">Yes</label> 
      </div> 
      <div class="col-xs-3"> 
       <input type="text" id="datepicker" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-3"> 
       <input type="checkbox" id="workNightNo" /> 
       <label for="workNightNo">No</label> 
      </div> 
      <div class="col-xs-3"> 
       <input type="checkbox" id="noFired" /> 
       <label for="noFired">No</label> 
      </div> 
     </div> 

    </div> 
</div> 

Answer 1

使用引導複選框類

<div class="checkbox"> 
    <label> 
     <input type="checkbox"> Check me out 
    </label> 
    </div>