.form-horizontal/.form-inline shouldn't be used directly on .form-group

[cvrebert]

Nesting should be used instead.
Need to verify this with @mdo.

[mdo]

Nesting within a single form to use both horizontal and inline? Probably won't work in v3 honestly. If folks need horizontal form layouts, columns are their best bet.

[cvrebert]

@mdo No, I mean that div.form-inline.form-group and div.form-horizontal.form-group are each invalid.

[mdo]

Oh, yes, completely invalid. Apologies, I misread that part. You got it right.

[cvrebert]

It's amazing, the random mistakes you find people making on StackOverflow...

[zacechola]

Would a different way to phrase this be .form-horizontal and .form-inline should only be applied to a form element?

var badFormHorizontal = $('.form-horizontal').not('form.form-horizontal');

The above would catch more than div.form-horizontal.form-group, etc.

Added a jsbin: http://jsbin.com/riqozeci/1/edit?html,js,output

[cvrebert]

I don't think we can/should mandate that. I can imagine people doing unusual but valid stuff like
form>div.form-inline+div.form-horizontal

[zacechola]

That example in particular could wreak havoc on the form*, but I see your general point. I'm trying to come up with a query that will be a bit more greedy so we're not linting every possible mutation of misplaced classes.

Either way, in this case, the docs are sort of explicit on it. Add .form-inline and .form-horizontal to <form>.

*Columns would be the appropriate suggestion for a <form> that has both .form-horizontal and .form-inline children. Which, honestly, is a question that seems to come up a lot on its own on both SO and in IRC.