![Glyphicons]( "Glyphicons")
本文介绍了加载项中的 Bootstrap 3 glyphicons的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Bellow 是我的 html(在 Jade 中)在附加组件中的字形.
.input-groupinput.form-control(type='text')span.input-group-addon.glyphicon.glyphicon-calendar
然而，插件没有与输入字段对齐.截图:
这是正常的还是引导程序 3 中的错误?
更新
明白了:在 bootstrap.css:2171 中(用less编译)
.glyphicon{ ...;顶部:1px；...}
错误?
解决方案
这是一个错误:https://github.com/twbs/bootstrap/issues/10936
我读过这个https://github.com/twbs/bootstrap/issues/9850 首先.
我使用此代码:
<br><div class="input-group"><span class="input-group-addon glyphicon glyphicon-star"></span><input type="text" class="form-control" placeholder="用户名">
<br><div class="input-group input-group-sm"><span class="input-group-addon glyphicon glyphicon-star"></span><input type="text" class="form-control" placeholder="用户名">
<br><div class="input-group input-group-lg"><input type="text" class="form-control" placeholder="用户名"><span class="input-group-addon glyphicon glyphicon-star"></span>
<br><div class="input-group"><input type="text" class="form-control" placeholder="用户名"><span class="input-group-addon glyphicon glyphicon-star"></span>
<br><div class="input-group input-group-sm"><input type="text" class="form-control" placeholder="用户名"><span class="input-group-addon glyphicon glyphicon-star"></span>
<br><div class="input-group input-group-lg"><input type="text" class="form-control" placeholder="用户名"><span class="input-group-addon glyphicon glyphicon-star"></span>
<br><div class="input-group input-group-lg"><input type="text" class="form-control" placeholder="用户名"><span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>
<br>
Firefox 的结果:
:
input-group-lg 会出现问题，双跨度使输入更长(由于 .glyphicon:empty)但没有解决问题.我也没有找到 .glyphicon{ ...;顶部:1px；...} 导致了这个问题.
对于 Firefox，我找到了这个解决方案:
来自 bootstrap.css:
.input-group-lg >.form-control,.input-group-lg >.input-group-addon，.input-group-lg >.input-group-btn >.btn {高度:45px；填充:10px 16px；字体大小:18px；行高:1.33；边框半径:6px；}
将垂直填充从 10px 更改为 9px 解决了该问题.
这个css规则来自forms.less(来自inputgroups.less的.input-lg()调用)使用@padding-large-vertical: 10px;(来自 variables.less)
在谷歌浏览器中，我发现了同样的问题，对于所有尺寸，请参见:
在这种情况下，使用双跨度会有所帮助:
`<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>`
Bellow is my html (in Jade) of glyphicons in add ons.
.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?
Update
Got it:in bootstrap.css:2171 (compiled with less)
.glyphicon{ ...; top: 1px; ...}
Bug?
解决方案
It's a bug: https://github.com/twbs/bootstrap/issues/10936
I read this https://github.com/twbs/bootstrap/issues/9850 first.
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:
:
There will be a problem for input-group-lg the 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.
For firefox i found this solution:
from 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.
This css rules comes from forms.less (.input-lg() call from inputgroups.less)using @padding-large-vertical: 10px; (from 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>`
这篇关于加载项中的 Bootstrap 3 glyphicons的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-31 04:22