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

Question

在 chrome 和 firefox 中:

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

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