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

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

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

Answer 2

如果用col-sm-3框包装每个复选框怎么办？

<div class="col-sm-3">
    <label class="radio-inline">
    <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label>
</div>

https://jsfiddle.net/hobs766o/1/

Answer 3

JsFiddle DEMO

.col-md-4.first label {
    display: block;
    width: 99px;
    float: left;
}
.col-md-4.second label {
    display: block;
    width: 99px;
    float: left;
}

<div class="form-inline">
    <div class="form-group">
        <div class="col-md-4 first">
            <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 style="clear:left"></div>

        <div class="col-md-4 second" style="
">
            <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>
</div>

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

3 个答案: