twitter-bootstrap 加载项中的 Bootstrap 3 glyphicons
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19168550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 glyphicons in add ons
提问by Diolor
Bellow is my html (in Jade) of glyphicons in add ons.
Bellow 是我在附加组件中的字形的 html（在 Jade 中）。
.input-group
input.form-control(type='text')
span.input-group-addon.glyphicon.glyphicon-calendar
However the addon is not aligned with the input field. Screeshot:
然而，插件没有与输入字段对齐。截图：
Is it normal or a bug in bootstrap 3?
这是正常的还是引导程序 3 中的错误？
Update
更新
Got it: in bootstrap.css:2171 (compiled with less)
明白了：在 bootstrap.css:2171 中（用less编译）
.glyphicon{ ...; top: 1px; ...}
Bug?
漏洞？
采纳答案by Bass Jobsen
Yes, it seems a bug for my:It's a bug: https://github.com/twbs/bootstrap/issues/10936
是的，这对我来说似乎是一个错误：这是一个错误：https: //github.com/twbs/bootstrap/issues/10936
I read this https://github.com/twbs/bootstrap/issues/9850first.
我首先阅读了这个https://github.com/twbs/bootstrap/issues/9850。
I use this code to this:
我使用此代码：
<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>
Results for Firefox:
Firefox 的结果：
:
：
There will be a problem for input-group-lgthe double span makes the input longer (due to .glyphicon:empty) but didn't fix the problem.
I also not found .glyphicon{ ...; top: 1px; ...}caused this problem.
input-group-lg双跨度会使输入变长（由于 .glyphicon:empty）会出现问题，但没有解决问题。我也没有发现.glyphicon{ ...; top: 1px; ...}造成这个问题。
For firefox i found this solution:
对于 Firefox，我找到了这个解决方案：
from bootstrap.css:
来自 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;
}
Changing the vertical padding from 10px to 9px solved the issue.
将垂直填充从 10px 更改为 9px 解决了该问题。
This css rules comes from forms.less (.input-lg() call from inputgroups.less) using @padding-large-vertical: 10px; (from variables.less)
这个css规则来自forms.less（来自inputgroups.less的.input-lg()调用）使用@padding-large-vertical: 10px; （来自 variables.less）
In google chrome i found a same kind of problem, for all sizes see:
在谷歌浏览器中，我发现了同样的问题，对于所有尺寸，请参见：
In this case it helps to use the double span:
在这种情况下，使用双跨度会有所帮助：
`<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>`
回答by Richard
To clarify Bass' answer, with the current version of Bootstrap 3, all you need to do is:
为了澄清 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>
In other words, just the basic Bootstrap markup as described in the docs.
换句话说，只是文档中描述的基本 Bootstrap 标记。
回答by Bartosz
Local override:
本地覆盖：
<style type="text/css">
.glyphicon {
top: 0;
}
</style>
回答by mykinde2
<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>
回答by Leandro Costa
within the button place the html code ' '
在按钮内放置 html 代码 ' '
 
回答by anond
<span class="input-group-addon"><i class="glyphicon glyphicon-user glyphicon-color"></i></span>
回答by AndyBobandy
I fixed it by adding this "position: initial" to the span style that the glyphicon lives in. OR you could use css like this.
我通过将这个“位置：初始”添加到字形所在的跨度样式来修复它。或者你可以像这样使用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>回答by Maxime Surmont
Old post but it might help someone: I use a button and it works perfectly!
旧帖子，但它可能对某人有所帮助：我使用一个按钮，效果很好！
<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>
回答by Brankodd
I fixed it with
我用
.glyphicon{
line-height: 1em;
}
.glyphicon{
line-height: 1em;
}
