- 首页
- 其他开发
- Bootstrap 3 has-feedback 图标与字段大小对齐似乎不起作用
Bootstrap 3 has-feedback 图标与字段大小对齐似乎不起作用
[英] Bootstrap 3 has-feedback icon alignment with field sizing doesn't seem to work
本文介绍了Bootstrap 3 has-feedback 图标与字段大小对齐似乎不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 has-feedback 表单类在表单字段上添加图标，但是对于输入字段大小，图标显示越界，下面是问题的 jsfiddle:
jsfiddle
<div class="row col-md-6"><表格名称=表格"><div class="form-group has-feedback"><label class="control-label" for="userName">用户名(BROKEN)</label><div class="row"><div class="col-sm-5"><input type="text"required class="form-control"/><span class="glyphicon glyphicon-ok form-control-feedback"></span>
<div class="form-group has-feedback"><label class="control-label" for="userName">用户名 (WORKS)</label><input type="text"required class="form-control"/><span class="glyphicon glyphicon-ok form-control-feedback"></span>
</表单>
它仅在字段的默认大小为包含表单的 100% 时有效.
任何想法如何控制字段大小并允许正确显示图标?
解决方案
昨天遇到了同样的问题.
通过添加这个css解决了它.只需根据您的设计编辑顶部和右侧位置即可.
.has-feedback .form-control-feedback {位置:绝对；顶部:3px；右:15px；显示:块；宽度:34px；高度:34px；行高:34px；文本对齐:居中；}
I am trying to use the has-feedback form class to add an icon on a form field, however with input field sizing, the icon is shown out of bounds, below is jsfiddle of the problem:
jsfiddle
<div class="container">
<div class="row col-md-6">
<form name="form">
<div class="form-group has-feedback">
<label class="control-label" for="userName">Username (BROKEN)</label>
<div class="row">
<div class="col-sm-5">
<input type="text"required class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</div>
<div class="form-group has-feedback">
<label class="control-label" for="userName">Username (WORKS)</label>
<input type="text"required class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
</div>
</div>
It only works when the field has default sizing which is 100% of the containing form.
Any ideas how to control field size and allow to display icon correctly?
解决方案
Had the same problem yesterday.
Solved it by adding this css. Just edit the top and right positions to suit your design.
.has-feedback .form-control-feedback {
position: absolute;
top: 3px;
right: 15px;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
}
这篇关于Bootstrap 3 has-feedback 图标与字段大小对齐似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
