2
我试图让我的复选框和标签在我使用Bootstrap网格时正确对齐。在我的复选框之后有一个标签之前,这似乎是非常好的。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>
我继续尝试你的建议,但不幸的是,即使使用bootstrap检查,我仍然得到不均匀的列盒类。 – R007 2014-10-28 01:47:25
您应该尝试使用表格而不是div – 2015-06-16 21:22:42