Bellow 是我的附加组件中的字形图标的 html（在 Jade 中）。
.input-group
input.form-control(type='text')
span.input-group-addon.glyphicon.glyphicon-calendar
但是插件未与输入字段对齐。截图：
这是正常的还是bootstrap 3中的错误？
更新
明白了：在 bootstrap.css:2171 中（编译时更少）
.glyphicon{ ...; top: 1px; ...}
漏洞？
为了澄清 Bass 的回答，使用当前版本的 Bootstrap 3，您需要做的就是：
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<span class="input-group-addon"><span class=" glyphicon glyphicon-star"></span></span>
</div>
换句话说，只是文档中描述的基本 Bootstrap 标记。
是的，这对我来说似乎是一个错误：这是一个错误：https ://github.com/twbs/bootstrap/issues/10936
我首先阅读了这个https://github.com/twbs/bootstrap/issues/9850。
我使用此代码：
<div class="container">
<br>
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-star"></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-sm">
<span class="input-group-addon glyphicon glyphicon-star"></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon glyphicon glyphicon-star"></span>
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon glyphicon glyphicon-star"></span>
</div>
<br>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon glyphicon glyphicon-star"></span>
</div>
<br>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon glyphicon glyphicon-star"></span>
</div>
<br>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
</div>
<br>
</div>
火狐的结果：
：
双跨度会使输入更长（由于 .glyphicon:empty）会出现问题，input-group-lg但没有解决问题。我也没有发现.glyphicon{ ...; top: 1px; ...}导致这个问题。
对于 Firefox，我找到了这个解决方案：
来自 bootstrap.css：
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
将垂直填充从 10px 更改为 9px 解决了这个问题。
这个css规则来自forms.less (.input-lg() call from inputgroups.less) 使用@padding-large-vertical: 10px; （来自变量.less）
在谷歌浏览器中，我发现了同样的问题，所有尺寸请参见：
在这种情况下，它有助于使用双跨度：
`<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>`
本地覆盖：
<style type="text/css">
.glyphicon {
top: 0;
}
</style>
<div class="input-prepend input-append">
<span class="add-on"> <i class="icon-user"></i></span>
<input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on"> <i class="icon-envelope"></i></span>
</div>
我用
.glyphicon{
line-height: 1em;
}
在按钮内放置 html 代码“ ”
<span class="input-group-addon"><i class="glyphicon glyphicon-user glyphicon-color"></i></span>
我通过将这个“位置：初始”添加到字形图标所在的跨度样式来修复它。或者你可以像这样使用 css。
.glyphicon {
position: initial;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-tags" style="position:initial"></span>
<input type="text" class="form-control" placeholder="Tags" />
</div>
</div>旧帖子，但它可能对某人有所帮助：我使用了一个按钮，并且效果很好！
<div class="input-group">
<input type="text" class="form-control" placeholder="Filter"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-filter"></span></button>
</span>
</div>