TWBS3 Horizontal Form: .help-block wraps unnecessarily under a short field

[jtickle]

I love the form-horizontal style and how the .help-block text looks below the form element. However, if you want the element to be short (like "state" or "province" on an address form), since both the element and the help-block are crammed inside a tiny "column", the help block gets wrapped instead of expanding to fill.

edit AGAIN: http://jsfiddle.net/GDMGg/

I'm not sure right off how to fix this, but I think the "width specification" should be available on the div containing the elements OR on the element itself.

[cvrebert]

You're missing div.panel-body in your markup.

[jtickle]

Sorry about that, I linked to the wrong Fiddle; the correct link is now in the description.

[jtickle]

And I had to fix the link again. Sorry, my jsFiddle-foo is weak today.

[cvrebert]

Just need to apply some grid-fu: http://jsfiddle.net/GDMGg/6/

[mdo]

By name, the help block is a block level element—it'll always wrap. You'll need to customize it or utilize the grid columns to lay things out.

[jtickle]

Still getting used to this new grid. Thanks guys!

[ajfranzoia]

The only drawback to the grid workaround is that, when being nested in another row, the width based on % gets modified, see http://jsfiddle.net/GDMGg/22/. Any possible way to circumvent this?

[ajfranzoia]

Nvm, just wrap the col-* input container inside a row and another col-*-12 to have a more fine-grained control over their width, and do the same with help-blocks or errors.