title: input-append class button shows with a margin
body: <p>Hi StackOverflow community, i'm building a site based on twitter bootstrap 2.0.4 in certain page i want to attach a button to an input. the problem is that show with a margin between the input and the button.</p>
  
  <p>i'm sure that is something i'm missing, but i can't determine what it is ?</p>
  
  <p><strong>EDIT</strong>: Some styles like disabled and uneditable-input are not applying correctly in the page</p>
  
  <p><strong>EDIT 2</strong>: Apparently working .disabled and .uneditable-input. </p>
  
  <p>JFiddle: <a href="http://jsfiddle.net/sHGtb/" rel="noreferrer">http://jsfiddle.net/sHGtb/</a></p>
  
  <p>JFiddle Fullscreen result: <a href="http://jsfiddle.net/sHGtb/embedded/result/" rel="noreferrer">http://jsfiddle.net/sHGtb/embedded/result/</a></p>
  
  <p>any help ??</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://localhost/test/index.php/../css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://localhost/test/index.php/../css/bootstrap-responsive.min.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="../../js/html5shiv.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;script type="text/javascript" src="http://localhost/test/index.php/../js/modernizr.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;form class="form-horizontal"&gt;
              &lt;fieldset&gt;
                  &lt;hr/&gt;
                  &lt;h4&gt;Puesto&lt;/h4&gt;
                  &lt;p&gt;Debe estar asignado segun su perfil, solo los administradores pueden cambiar esta opcion; si existiese alguna irregularidad debe solicitar reportelo al administardor.&lt;/p&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label for="puesto" class="control-label"&gt;Puesto&lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;div class="input-append"&gt;
                              &lt;input type="text" name="puesto" class="input-xlarge" /&gt;
                              &lt;button class="btn" type="button"&gt;&lt;i class="icon-search"&gt;&lt;/i&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;hr/&gt;
  
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;  
      &lt;script language="javascript" type="text/javascript" src="http://localhost/test/index.php/../js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" type="text/javascript" src="http://localhost/test/index.php/../js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ehxl9.png" alt="Screenshot of the problem"></p>