表单/ .input-group / .input-group-addon输入中的不正确的glyphicon大小在bootstrap 3中

Question

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

但是，字形显示大于输入文本框，如下所示：

documentation说使用.input-group与.input-group-addon一起在.form-control前加或附加元素。

据我所知，我正在这样做，但我显然有些不对劲，无法弄清楚它是什么。

以下标记和提示：

<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