html - 如何在 Bootstrap 中正确对齐复选框和标签？

Question

我有两行复选框和标签。虽然水平对齐不是问题，但是第二列的垂直对齐有问题。在这种情况下如何实现对称？

<div class="form-inline">
<div class="form-group">
    <div class="col-md-4">
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
    </div>
    <div class="col-md-4">
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label>
        <label class="radio-inline">
            <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label>
    </div>
</div>

JSfiddle

如您所见，星期一和星期五(复选框和标签)的对齐方式不正确。

Answer 1

I've updated your fiddle在包装 div .col-md-4 上使用固定宽度，并使用 float 定位标签，使用 calc< 将每个标签的宽度设置为父宽度的 1/3/ 功能:

label{
    float: left; 
    width: calc(100%/3)
}