title: Multi column forms with fieldsets
body: <p>Sorry for the vague title, I wasn't sure how to describe it better.
  I'm currently upgrading a website to bootstrap 3 and got a little problem with multiple inputs in one form row.</p>
  
  <p>In bootstrap 2, I would have simply created two <code>.controls.controls-row</code> with <code>.spanX</code> elements inside to create the necessary columns.
  However, as these are removed in bootstrap 3, I replaced them with <code>.form-group</code> and the new column classes.</p>
  
  <p>If I have two rows inside the form (resp. fieldset in this case), the first one becomes non-editable if the second one is a one-column row (see code and attached screenshot below).</p>
  
  <p>I inspected the elements with firebug and saw that the <code>.col-sm-12</code> from the second fieldset lays over the <code>.form-group</code> and does not let the user click the elements inside.
  In the first fieldset with the <code>.col-sm-12</code> first, everything works fine.</p>
  
  <p>I also tried placing a <code>.row</code> around each <code>.form-group</code> which solves the issue, but increases the width of the form line, so it does no longer has a left margin inside the fieldset.</p>
  
  <p>Is there a way to solve this without increasing the form-row width?</p>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT: I added the generated code as a <a href="http://jsfiddle.net/tVHMy/" rel="noreferrer">jsFiddle</a></p>
  
  <pre><code>%fieldset
    %legend= t('.login_information')
    .form-group
      .col-sm-12
        = f.label :login
        = f.text_field :login, :class =&gt; 'form-control', :required =&gt; true
  
    .form-group
      .col-sm-6
        = f.label :password
        = f.password_field :password, :class =&gt; 'form-control'
      .col-sm-6
        = f.label :password_confirmation
        = f.password_field :password_confirmation, :class =&gt; 'form-control'
  
  %fieldset
    %legend= t('.personal_details')
    .form-group
      .col-sm-4
        = f.label :title
        = f.text_field :title, :class =&gt; 'form-control'
      .col-sm-4
        = f.label :firstname
        = f.text_field :firstname, :class =&gt; 'form-control', :required =&gt; true
      .col-sm-4
        = f.label :lastname
        = f.text_field :lastname,  :class =&gt; 'form-control', :required =&gt; true
  
    .form-group
      .col-sm-12
        = f.label :email
        = f.text_field :email, :class =&gt; 'form-control email', :required =&gt; true
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/omvId.png" alt="Non-editable form elements"></p>