title: Ruby-on-rails Twitter Bootstrap field with error styling
body: <p>Im using Ruby on Rails 4 with twitter bootstrap to display a <code>form_for</code> (twitter bs <code>form_horizontal</code>). The styling below works correctly (label, input and hint display next to each other ) for normal fields (non error'd) when rails wraps elements in the <code>field_with_errors</code> div however the hint is dropped to the beneath the input element.</p>
  
  <pre><code>&lt;div class="control-group required"&gt;
          &lt;div class="field_with_errors"&gt;&lt;label class="control-label" for="lot_commonname_id"&gt;Common Name&lt;/label&gt;&lt;/div&gt;
          &lt;div class="controls"&gt;
              &lt;div class="field_with_errors"&gt;&lt;select id="lot_commonname_id" name="lot[commonname_id]"&gt;&lt;option value=""&gt;Please select&lt;/option&gt;
                 &lt;option value="1"&gt;x&lt;/option&gt;
                 &lt;option value="2"&gt;y&lt;/option&gt;
                 &lt;option value="3"&gt;z&lt;/option&gt;
                 &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="hint"&gt;
                 &lt;a href="#" rel="tooltip" data-original-title="xyz test."&gt;
                 &lt;i class="icon-info-sign"&gt;&lt;/i&gt;
                 &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  .field_with_errors {
    @extend .control-group;
    @extend .error;
  }
  
  .form-horizontal .field_with_errors
  {
   margin: 0;
  }
  
  .form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after 
  {
   display: block;
   clear: none;
  }
  </code></pre>
  
  <p>the following jsfiddle <a href="http://jsfiddle.net/a78B5/6/" rel="nofollow">http://jsfiddle.net/a78B5/6/</a> demos the problem</p>