Bootstrap 3表单复选框标签与Chromium + Firefox中的复选框输入不对齐

Question

在chrome和firefox中:

• form-inline导致标签向下移动,复选框和标签之间的空间比使用时更窄form-horizontal.
• form-horizontal 显示完美

这是jsFiddle的演示

这是一些代码:

<form class="form-inline">
    <div class="checkbox">
        <label>
            <input type="checkbox"/> Test againn
        </label>
    </div>
</form>

这是一个截图:

有没有办法让复选框在两个浏览器中都正确对齐,或者我错过了什么？

Answer 1

这实际上是所有浏览器中的问题^{(我已经测试过)}

这是一个截图 - 我添加了一个灰色边框,因此更容易分辨它没有排队.

这是一个重现问题的演示

当内联表单位于大于的屏幕上时,会出现此问题768px.

特别是,弄乱对齐的东西来自这种形式的行.无(通过此提交引入):

float: none;

天真地,将此值设置回来float: left似乎可以解决问题,但我不确定可能出现的其他问题.

@media (min-width: 768px) {
    .form-inline .radio input[type="radio"], 
    .form-inline .checkbox input[type="checkbox"] {
        float: left;
        margin-right: 5px;
    }
}

以下是包含这些更改的代码的工作版本

除此之外,你只需要调整CSS

Answer 2

我换radio or checkbox了radio-inline or checkbox-inline上课后得到了我的作品

http://jsfiddle.net/gn9Up/57/

Answer 3

在我的情况下，没有一个答案解决了这个问题。这就是我为将输入与标签正确对齐所做的工作。A 已将 2px 添加到边距顶部。在bootstrap.css 中它被设置为 4px。将其设置为 6px“修复”问题。

CSS

input[type=checkbox] {
    margin: 6px 0 0;
} 

HTML

<label class="checkbox-inline">
    <input type="checkbox" value=""> Label text
</label>