引导中的形式/ .input-group / .input-group-addon输入中的字形大小不正确3 [英] Incorrect glyphicon sizes in form / .input-group / .input-group-addon inputs in bootstrap 3

问题描述

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

I am trying to add glyphicons to form input boxes using bootstrap 3.

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

However, the glyphicons are displayed larger than the input textbox, as can be seen here:

文档说使用 .input-group 和 .input-group-addon ，将元素添加或附加到 .form-control 。

The documentation says Use .input-group with an .input-group-addon to prepend or append elements to a .form-control.

据我所知，

标记和捣蛋以下：
$ b

Markup and fiddle below:

<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>

在jsfiddle上的工作示例

推荐答案

这是因为 font-size 正在从'jumbotron'（21px）继承。

It's because the font-size is being inherited from the 'jumbotron' (21px).

您需要在表单或其项目上显式设置字体大小。

You'll need to explicitly set the font-size on the form or its items.

此外，一旦你使用glyphicon类，你会得到 top：1px 需要将其设置为0，使插件与输入对齐。

Also, once you use the glyphicon class, you'll get the top: 1px so you'll need to set that to 0 for the addon to line up with the input.

这是我更新的小提琴。

这篇关于引导中的形式/ .input-group / .input-group-addon输入中的字形大小不正确3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！