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填充，默认为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;
}
}

无法将文本与复选框对齐（Bootstrap v3.3.6）

1 个答案:

https://jsfiddle.net/aj37xu05/