bootstrap input-group 1px插件和输入之间的错误配置

Question

我有以下html - 使用Bootstrap

<div class="input-group" style="width:100px;">
    <span class="input-group-addon glyphicon glyphicon-time" ></span>
    <input type="text" class="form-control" placeholder="Time">
</div>

产生以下令人讨厌的输出

输入和插件之间非常恼人的1-2px对齐差异 - 我不能为我的生活找出原因。 可以在此fiddle

中看到

Answer 1

＆＃39; .glyphicon＆＃39;将前1个px放在0中，为.glyphicon {top: 0px}

Answer 2

我认为这种行为的原因是glyphicon类。

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">
        <span class="glyphicon glyphicon-time"></span>
    </span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

我将第二个跨度放入第一个跨度，看起来不错。