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

Question

在chrome和firefox中：

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

Here's a demo in jsFiddle

这里有一些代码：

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

这是一个截图：

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

Answer 1

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

这里有一个截图 - 我添加了一个灰色边框，因此更容易判断它没有排队。

Here's a demo that reproduces the issue

当inline form位于大于768px的屏幕上时，会出现此问题。

特别是，弄乱对齐的是line of forms.less（随this commit引入）：

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

Here's a working version of your code with these changes

除此之外，你只需要调整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>