Bootstrap 3 form checkbox label doesn't align with checkbox input in Chromium + Firefox

In both chrome and firefox:

• form-inline causes the label to be shifted downwards and the space between the checkbox and the label is narrower than when using form-horizontal.
• form-horizontal displays perfectly

Here's a demo in jsFiddle

Here's some code:

<!-- language: lang-html -->

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

Here's a screenshot:

Is there a way to make the checkboxes all aligned correctly in both browsers or am I missing something?

This is actually an issue in all browsers ^{(that I've tested)}

Here's a screenshot - I added a grey border so it's easier to tell that it's not lining up.

Here's a demo that reproduces the issue

The issue occurs when the inline form is on a screen that is larger than 768px.

Particularly, the thing that messes up the alignment is from this line of forms.less (which was introduced with this commit):

<!-- language: lang-css -->

float: none;

Naively, setting this value back to float: left seems to fix the problem, but I'm not sure what other issues may arise.

<!-- language: lang-css -->

@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

Other than that, you'd just have to tweak the CSS