css - Bootstrap 3 中 form/.input-group/.input-group-addon 输入中的字形大小不正确

Question

我正在尝试使用 bootstrap 3 添加字形以形成输入框。

但是，字形显示得比输入文本框大，如下所示:

documentation 使用 .input-group 和 .input-group-addon 将元素添加到 .form-control 中。

据我所知，我正在这样做，但我显然有问题，而且无法弄清楚它是什么。

下面的标记和 fiddle :

<div class="jumbotron">
    <h4>Glyphicons, why you no look nice?</h4>
    <form name="form">
        <div class="input-group">
            <span class="input-group-addon glyphicon glyphicon-envelope"></span>
            <input type="email" 
                class="form-control" 
                placeholder="Email" 
                name="email"/>
        </div>                
        <div class="input-group">
            <span class="input-group-addon glyphicon glyphicon-lock"></span>
            <input type="password" 
                class="form-control" 
                placeholder="Password" 
                name="password"/>
        </div>                
    </form>
</div>

Working example on jsfiddle

Answer 1

这是因为 font-size 是从 'jumbotron' (21px) 继承而来的。

您需要在表单或其元素上明确设置字体大小。

此外，一旦您使用 glyphicon 类，您将获得 top: 1px 因此您需要将其设置为 0 以便插件与输入对齐。

Here's my updated fiddle .