title: Radio buttons in a Bootstrap .form-horizontal
body: <p>I'm banging my head against the wall trying to get sane behavior out of Bootstrap with radio buttons inside a <code>.form-horizontal</code>.</p>
  
  <p>The problem is getting the radio buttons and their labels to line up while also aligning with the rest of the form. The best I've managed is this:</p>
  
  <pre><code>    &lt;legend&gt;New user&lt;/legend&gt;
      &lt;form accept-charset="UTF-8" action="#" class="form-horizontal" id="new_user" method="post"&gt;
  
          &lt;div class="control-group"&gt;
            &lt;label class="control-label" for="user_affiliation"&gt;Affiliation&lt;/label&gt;
              &lt;div class="controls"&gt;
                &lt;input id="user_affiliation" name="user[affiliation]" size="30" type="text" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;div class="control-group"&gt;
            &lt;div clas="controls"&gt;
              &lt;div class="radio"&gt;
                &lt;label&gt;
                  &lt;input id="user_role_managing_editor" name="user[role]" type="radio" value="Managing editor"&gt;
                  Managing editor
                &lt;/label&gt;
                &lt;label&gt;
                  &lt;input id="user_role_area_editor" name="user[role]" type="radio" value="Area editor"&gt;
                  Area editor
                &lt;/label&gt;
                &lt;label&gt;
                  &lt;input id="user_role_author_or_referee" name="user[role]" type="radio" value="Author or referee"&gt;
                  Author/referee
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div style="text-align: center;"&gt;
            &lt;input class="btn btn-primary" name="commit" type="submit" value="Register" /&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p>Which gets me this:<img src="https://i.stack.imgur.com/TA9Jx.png" alt="enter image description here"></p>
  
  <p>As you can see, the radio-buttons are out of whack with the rest of the form. They ought to line up vertically with the text-field, or do something more sensible than hug the left as if this were a <code>.form-inline</code>.</p>
  
  <p>Any help would be greatly appreciated.</p>