HTML rows mis-aligned with simple_form 2.1.2 and Bootstrap 3/Rails 3.2

Here is a HTML page rendered through simple_form 2.1.2 with 3 mis-aligned rows on Bootstrap 3 and Rails 3.2.

We know that Bootstrap 3 is not compatible with simple_form 2.1 and Rails 3.2. The HTML source code of all rows have the same structure (difference name of course). Also we find that the number of mis-aligned rows varies with different version of Firefox (newer version may have only 2 mis-aligned rows) and type of browsers (IE 10.0 may have 5 mis-aligned rows). Also by adding <div></div> to <%=f.input ..%> of mis-aligned rows on simple_form html.erb may drag one row back to inline and reduce mis-aligned rows by 1.

What causes the mis-alignment? Is there way we can fix it?

Here is simple_form.css.scss:

.simple_form div.input {
  margin-bottom: 10px;
}

.simple_form label {
  float: left;
  width: 140px;
  text-align: right;
  margin: 2px 10px;
}

.simple_form input.readonly {
  background: transparent; 
  border: 0;
}

div.boolean, .simple_form input[type='submit'] {
  margin-left: 120px;
}

div.boolean label, label.collection_radio {
  float: none;
  margin: 0;
}

label.collection_radio {
  margin-right: 10px;
  vertical-align: -2px;
  margin-left:   2px;
}

.field_with_errors {
  background-color: #ff3333;
}

.simple_form .error {
  clear:   left;
  color:   black;
  display: block;
  margin-left: 120px;
  font-size:    12px;
}

.simple_form .hint {
  clear: left;
  margin-left: 120px;
  font-size:    10px;
  color: #555;
  display: block;
  font-style: italic;
}

input.radio {
  margin-right: 5px;
  vertical-align: -3px;
}

input.check_boxes {
  margin-left: 3px;
  vertical-align: -3px;
}

label.collection_check_boxes {
  float: none;
  margin: 0;
  vertical-align: -2px;
  margin-left:   2px;
}

Here is the html.erb:

<%= simple_form_for @part do |f| %>  
      <%= f.input :name, :label => t('Part Name') %>  
      <%= f.input :part_num, :label => t('Part#') %>
      <%= f.input :spec, :label => t('Spec'), :input_html => {:rows => 3} %>
      <%= f.input :unit, :label => t('Unit'), :collection => @qty_unit, :include_blank => true %>
      <%= f.input :category_id, :label => t('Part Category'), :collection => TwoTierDefinitionx::Definition.where('active = ? AND for_which = ?', true, 'material_category').order('ranking_index'), :include_blank => true %>
      <%= f.input :sub_category_id, :label => t('Part Sub Category'), :collection => TwoTierDefinitionx::SubDefinition.where(active: true).order('ranking_index'), :include_blank => true %>
      <%= f.input :preferred_supplier, :label => t('Preferred Supplier'), :input_html => {:rows => 2} %>
      <%= f.input :preferred_mfr, :label => t('Preferred Mfr') , :input_html => {:rows => 2} %>
      
      <%= link_to t('Back'), SUBURI + "/authentify/view_handler?index=0", :class => BUTTONS_CLS['action'] %>
      <%= f.button :submit, t('Save'), :class => BUTTONS_CLS['action'] %>  
<% end %>

Its just the css behind doing that you need to go to the css and use float or align or margin to position those form elements where you want them to be