如何在引导程序中正确对齐复选框和标签？

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

正如您所看到的,Moday和Friday的对齐方式(复选框和标签)不合适.

Answer 1

我用包装div上的固定宽度更新了你的小提琴,.col-md-4并使用float定位标签,每个标签的宽度设置为使用calc函数的父节点宽度的1/3 :

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