Question

我的复选框被按下而没有垂直对齐，左边是标签。

注意：宽度必须> 768px才能看到问题

＆＃13;

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

＆＃13;

<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>

＆＃13;

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引导程序。因此，如果您想将其与标签对齐，请使用margin-top:0px;

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

引导程序表单标签未与复选框对齐

1 个答案: