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

Question

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:

<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?

Answer 1

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):

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.

@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

Answer 2

I got mine works after changing radio or checkbox to radio-inline or checkbox-inline class

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