Input groups bigger than input in Bootstrap 3 using Jumbotron container

Question

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.

Here you can find a JsFiddle and an screenshot with the problem:

<div class="jumbotron">     <h1>Jumbotron with form</h1>         <form>            <div class="input-group">                <input type="text" class="form-control" placeholder="Username">                   <span class="input-group-addon">@</span>            </div>          </form>   </div> 

Live example at http://jsfiddle.net/DTcHh/

Screenshot:

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.

Answer 1

Last night, I had exactly the same problem. None of the fixes mentioned above worked in my context. What finally did do the job was setting the margin to 0:

.input-group .form-control {     margin: 0px !important; } 

Perhaps this helps someone with a similar problem!