引导行和列未与复选框和标签正确对齐

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>