title: Simple_form class form-horizontal with bootstrap 3 not working in rails 4
body: <p>I have two rails apps, and the 'form-horizontal' is working in one, but not the other, and I have no idea why.</p>
  
  <p>First app is called "Horizontal" (my test app) and the other is "Inventory"</p>
  
  <p>Form in "horizontal" app:</p>
  
  <pre><code>&lt;%= simple_form_for(@part, html: {class: 'form-horizontal' }) do |f| %&gt;
    &lt;div class="field"&gt;
      &lt;%= f.input :name %&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;%= f.input :number %&gt;
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;%= f.submit %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>and looks like this in the browser:</p>
  
  <p><img src="https://dha4w82d62smt.cloudfront.net/items/2O2a3d2y0K1P1G14370t/Screen%20Shot%202014-02-16%20at%206.16.31%20AM.png" alt="horizontal form working"></p>
  
  <p>and the form for the "inventory" app is:</p>
  
  <pre><code>&lt;%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %&gt;
    &lt;%= f.error_notification %&gt;
    &lt;div class="field"&gt;
      &lt;%= f.input :part_number %&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;%= f.input :on_order_qty %&gt;
      &lt;%= f.input :revision %&gt;
      &lt;%= f.input :current_rev %&gt;  
      &lt;%= f.input :name, required: false%&gt;&lt;br&gt;
    &lt;/div&gt;
  
    &lt;%= f.simple_fields_for :parts do |part| %&gt;
      &lt;%= render 'part_fields', :f =&gt; part %&gt;
    &lt;% end %&gt;
    &lt;div class="links"&gt;
      &lt;%= link_to_add_association 'Add additional supplier', f, :parts %&gt;&lt;br&gt;&lt;br&gt;
    &lt;/div&gt;
    &lt;div class="fields"&gt;
      &lt;%= f.input :stock_qty %&gt;
      &lt;%= f.input :ncmr_qty %&gt;
    &lt;/div&gt;
    &lt;div class="form-actions"&gt;
      &lt;%= f.submit %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>but it looks like this in the browser:</p>
  
  <p><img src="https://dha4w82d62smt.cloudfront.net/items/33422E0R0c0l0j1u201P/Screen%20Shot%202014-02-16%20at%206.47.16%20AM.png" alt="horizontal form not working"></p>
  
  <p>Why won't the form-horizontal class work in the "Inventory" app? </p>
  
  <p>It appears that the integer input fields are getting rendered horizontally, but something weird is happening in the text input fields.  Here is the source html from the browser for the "Inventory" app:</p>
  
  <pre><code>&lt;form accept-charset="UTF-8" action="/items" class="simple_form form-horizontal"
  id="new_item" method="post"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input
  name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input name="authenticity_token"
  type="hidden" value="H3DKGhGdtfv1e8F1rg9TgDJUyaBspXOSFMpm2gnjwzk=" /&gt;&lt;/div&gt;
  
  &lt;div class="field"&gt;
  &lt;div class="input string required item_part_number"&gt;&lt;label class="string required"
  for="item_part_number"&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt; Part number&lt;/label&gt;&lt;input aria
  required="true" class="string required" id="item_part_number" maxlength="255"
  name="item[part_number]" required="required" size="255" type="text" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="field"&gt;
  &lt;div class="input integer optional item_on_order_qty"&gt;&lt;label class="integer optional"
  for="item_on_order_qty"&gt;On order qty&lt;/label&gt;&lt;input class="numeric integer optional"
  id="item_on_order_qty" name="item[on_order_qty]" step="1" type="number" /&gt;&lt;/div&gt;
  &lt;div class="input string optional item_revision"&gt;&lt;label class="string optional"
  for="item_revision"&gt;Revision&lt;/label&gt;&lt;input class="string optional" id="item_revision"
  maxlength="255" name="item[revision]" size="255" type="text" /&gt;&lt;/div&gt;
  &lt;div class="input boolean optional item_current_rev"&gt;&lt;input name="item[current_rev]"
  type="hidden" value="0" /&gt;&lt;input class="boolean optional" id="item_current_rev"
  name="item[current_rev]" type="checkbox" value="1" /&gt;&lt;label class="boolean optional"
  for="item_current_rev"&gt;Current rev&lt;/label&gt;&lt;/div&gt;  
  &lt;div class="input string optional item_name"&gt;&lt;label class="string optional"
  for="item_name"&gt;Name&lt;/label&gt;&lt;input class="string optional" id="item_name" maxlength="255"
  name="item[name]" size="255" type="text" /&gt;&lt;/div&gt;&lt;br&gt;
  &lt;/div&gt;
  ( I took out the html for the nested fields and some other fields for brevity)
  &lt;div class="form-actions"&gt;
   &lt;input name="commit" type="submit" value="Create Item" /&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I've tested in both Chrome and Firefox.  I've checked that the bootstrap-sass gem and simple_form gem are the same versions.  I have no fancy customization css or javascript, just the <code>@import 'bootstrap';</code> line in a <code>bootstrap_custom.css.scss</code> file in both apps.  I don't know why the text input fields cover the whole width of the screen in the "Inventory" app, but the integer fields seem to be fine and rendering horizontally.  What's wrong here?</p>