css - 无法将文本与复选框对齐 (Bootstrap v3.3.6)

Question

我对 Bootstrap 表单中的复选框非常着迷。在我的台式机上的 Chrome 和 IE 中，它看起来几乎不错(文本和复选框的对齐方式几乎相同)。在我的平板电脑和智能手机上的 Chrome 中，文本“跳起来”了几个像素......这不是一个大问题，但它让我感到不安，因为我对 CSS 不是那么精通(我开始使用 Bootstrap 的原因)我只是想不通为什么。而且我不喜欢什么都不知道...所以有人知道为什么最新版本的 Bootstrap 似乎未对齐复选框文本，是否有修复？

<form class="form-horizontal" role="form">
<div class="form-group">
    <label class="control-label col-sm-3" for="usr">Username:</label>
    <div class="col-sm-9">
        <input type="text" name="usr" class="form-control" id="usr">
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-3" for="pwd">Password:</label>
    <div class="col-sm-9"> 
        <input type="password" name="pwd" class="form-control" id="pwd">
    </div>
</div>
<div class="form-group"> 
    <div class="col-sm-offset-3 col-sm-9">
        <div class="checkbox">
            <button type="submit" class="btn btn-default">Login</button>
            &nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" name="remember" value="1">Remember me</label>
        </div>
    </div>
</div>
</form>

Answer 1

默认的 Bootstrap 行为是垂直对齐 <label>到 input field 。在 768px 及更高时，顶部将有 7px 的填充，这是 bootstrap 的默认值。

如果您尝试对齐 label在输入字段的底部，您将需要此代码:

@media (min-width: 768px){

.form-horizontal .control-label {
    padding-top: 14px;
    margin-bottom: 0;
    text-align: right;
}
}

https://jsfiddle.net/aj37xu05/1/

---

如果您打算避免这种情况，并让他的文本与输入字段的顶部齐平，您需要使用此代码:

    @media (min-width: 768px){
.form-horizontal .control-label {
    padding-top: 0px;
    margin-bottom: 0;
    text-align: right;
}
}

https://jsfiddle.net/aj37xu05/