无法将文本与复选框对齐(引导程序 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

默认引导行为是将<label>垂直对齐到input字段。 在 768px 及更高时，顶部将有 7px 填充，默认为引导程序。

如果您尝试将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/