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

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

<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(复选框和标签)的对齐方式不合适。

最佳答案

在包装的div .col-md-4上具有固定宽度的I've updated your fiddle，并通过使用float定位标签，并​​使用calc函数将每个标签的宽度设置为采用父级宽度的1/3:

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

关于html - 如何在 bootstrap 中正确对齐复选框和标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32004967/