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.