引导表单标签与复选框不对齐

Question

我的复选框被向下推，而不是与左侧的标签垂直对齐。

http://jsfiddle.net/1ppjLyqg/

注意：宽度必须为>768 像素才能看到问题

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

<div class="form-group">
    <label for="group" class="col-sm-3 text-right">Group*</label>
    <div class="col-sm-9">
        <input type="number" id="group" min="1" max="20" ng-model="member.group" maxlength="2" ng-required="true" class="form-control" placeholder="1" style="width:75px">
    </div>
</div>
    
<div class="form-group">
    <label class="col-sm-3 text-right">Office(s)*</label>
    <div class="col-sm-offset-3 col-sm-8 checkbox" id="offices">
        <label>
            <input type="checkbox" id="inlineCheckbox1" value="0">Office 1</label>
        <label>
            <input type="checkbox" id="inlineCheckbox2" value="1">Office 2</label>
        <label>
            <input type="checkbox" id="inlineCheckbox3" value="2">Office 3</label>
        <label>
            <input type="checkbox" id="inlineCheckbox4" value="3">Office 4</label>
        <label>
            <input type="checkbox" id="inlineCheckbox5" value="4">Office 5</label>
    </div>
</div>

Answer 1

从div 中删除 " col-sm-offset-3 "。您已经在为标签提供col-sm-3。

<div class="form-group">
    <label class="col-sm-3 text-right">Office(s)*</label>
    <div class="col-sm-8 checkbox" id="offices">
        <label>
            <input type="checkbox" id="inlineCheckbox1" value="0">Office 1</label>
        <label>
            <input type="checkbox" id="inlineCheckbox2" value="1">Office 2</label>
        <label>
            <input type="checkbox" id="inlineCheckbox3" value="2">Office 3</label>
        <label>
            <input type="checkbox" id="inlineCheckbox4" value="3">Office 4</label>
        <label>
            <input type="checkbox" id="inlineCheckbox5" value="4">Office 5</label>
    </div>
</div>

此外，复选框还有一个引导的边距顶部。因此，如果要将其与标签对齐，请使用margin-top:0px;

演示 ：http://jsfiddle.net/1ppjLyqg/1/