title: Input groups bigger than input in Bootstrap 3 using Jumbotron container
body: <p>I'm experimenting a strange behavior with Bootstrap 3 input groups. When I add an input-group-addon (text or icon) to a form inside a jumbotron, the input-group height is bigger than its input height.</p>
  
  <p>Here you can find a JsFiddle and an screenshot with the problem:</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
      &lt;h1&gt;Jumbotron with form&lt;/h1&gt;
          &lt;form&gt;
             &lt;div class="input-group"&gt;
                 &lt;input type="text" class="form-control" placeholder="Username"&gt;
                    &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
             &lt;/div&gt; 
          &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Live example at <a href="http://jsfiddle.net/DTcHh/" rel="noreferrer">http://jsfiddle.net/DTcHh/</a></p>
  
  <p>Screenshot: <img src="https://i.stack.imgur.com/2sDI0.png" alt="enter image description here"></p>
  
  <p>How can I fix this problem? I'm looking for a Bootstrap solution but if that's not possible would be nice if you could help me to fix it with CSS rules.</p>