wrap labels in column div so the surrounding whitespace isn't clickable

This uses a `<div>` wrapper around horizontal labels and puts the column class on the `<div>` instead of the `<label>`. The purpose is to prevent large areas of whitespace to the left of the label text from being clickable parts of the label. I add `.pull-right` to the label so it draws in the same location as before.

This is another one that does not appear in the bootstrap docs. Don't know what your philosophy is on that, it might also need to just live in my overrides instead.

I just get really bothered when I click what appears to be the page margin and it takes some kind of action when all I wanted to do was focus the window so I can scroll, etc. Reminds me of pages that make the whole margin an advertisement link.