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。将其设置为 6 像素“修复”问题。

CSS

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

HTML

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