Eingabegruppen größer als Eingabe in Bootstrap 3 mit Jumbotron-Container

Ich experimentiere mit einem merkwürdigen Verhalten bei Bootstrap 3-Eingabegruppen. Wenn ich einem Formular in einem Jumbotron ein Eingabegruppen-Addon (Text oder Symbol) hinzufüge, ist die Eingabegruppenhöhe größer als die Eingabehöhe.

Hier finden Sie eine JsFiddle und einen Screenshot mit dem 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-Beispiel beihttp://jsfiddle.net/DTcHh/

Bildschirmfoto:

Wie kann ich dieses Problem beheben? Ich suche eine Bootstrap-Lösung, aber wenn das nicht möglich ist, wäre es schön, wenn Sie mir helfen könnten, sie mit CSS-Regeln zu beheben.

Antworten auf die Frage(6)

Ihre Antwort auf die Frage