form-horizontal text alignment broken on col-xs media size

[skewty]

I can't seem to figure out why bootstrap 3 doesn't seem to render form-horizontal correctly on smaller screen sizes.

The labels should all be right aligned (not left) and their vertical alignment should be baseline so the text lines up with the inputs.

This does not work when rendered in mobile mode in Chrome on the "Nexus 5" device nor on a true mobile device.

Any ideas as to what I missed / got wrong?

http://jsbin.com/fohureloho/edit?html,output

At 768 px wide, it suddenly aligns correctly.Below that, it left aligns.. Is this intended?

[skewty]

I have tried other forums and nobody seems to have a solution. Has anyone else encountered this? I am thinking of submitting a bug report.

[skewty]

I found the issue.. Bootstrap has this built-in:

@media (min-width: 768px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}

I simply added this to the top of my page to undo the IMO odd default:

@media (min-width: 1px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}

[skewty]

I found the issue.. Bootstrap has this built-in:

@media (min-width: 768px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}

I simply added this to the top of my page to undo the IMO odd default:

@media (min-width: 1px) {
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0;
text-align: right;
}
}