twitter-bootstrap Bootstrap 3 has-feedback icon 对齐字段大小似乎不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21807650/
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 has-feedback icon alignment with field sizing doesn't seem to work
提问by Val
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:
我正在尝试使用 has-feedback 表单类在表单字段上添加一个图标，但是对于输入字段大小，图标显示越界，下面是问题的 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.
它仅在字段的默认大小为包含表单的 100% 时才有效。
Any ideas how to control field size and allow to display icon correctly?
任何想法如何控制字段大小并允许正确显示图标？
回答by Julien
Had the same problem yesterday.
昨天有同样的问题。
Solved it by adding this css. Just edit the top and right positions to suit your design.
通过添加这个css解决了它。只需编辑顶部和右侧位置以适合您的设计。
.has-feedback .form-control-feedback {
position: absolute;
top: 3px;
right: 15px;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
}
回答by eheydenr
I had a similar problem today. I wanted to add an icon from bootstrap after an input element in a table. But i faced the same issue, the icon was rendered on the next line.
我今天遇到了类似的问题。我想在表中的输入元素之后从引导程序添加一个图标。但我遇到了同样的问题，图标呈现在下一行。
Before:
前：
<input type="text" class="form-control input-sm" name="loginnaam" style="width:220px" size="20" value="<?echo $db[loginnaam] ?>"><span class="glyphicon glyphicon-ok"></span>
I solved it by adding a div around the input element with float: left:
我通过在带有 float: left 的输入元素周围添加一个 div 来解决它：
<div style="float: left;">
<input type="text" class="form-control input-sm" name="loginnaam" style="width:220px" size="20" value="<?echo $db[loginnaam] ?>">
</div>
<span class="glyphicon glyphicon-ok"></span>
The icon is now displayed afterthe input element on the same line. This solved the problem for me.
图标现在显示在同一行的输入元素之后。这为我解决了这个问题。
回答by Sniffer
I find the absolutely positioning answer mentioned above has a couple of issues - specifically where a label stretches onto two lines and inputs other than text-fields.
我发现上面提到的绝对定位答案有几个问题 - 特别是标签延伸到两行和文本字段以外的输入的地方。
As an experiment I've moved the glyphicon to be more inline with the message, added in some other input types and sprinkled in some aria goodness:
作为一项实验，我将字形移动到与消息更内联的位置，添加了一些其他输入类型并添加了一些咏叹调：
http://jsfiddle.net/Nickelliott/kCcL7/
http://jsfiddle.net/Nickelliott/kCcL7/
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError">Input with error with an extremely long label to see what happens when a label goes onto two lines.</label>
<input type="text" class="form-control" id="inputError" aria-invalid="true" aria-describedby="inputErrorText" />
<span id="inputErrorText" class="help-block help-feedback">A block of help text that breaks onto a new line and may extend beyond one line. <span class="glyphicon glyphicon-remove form-control-feedback"></span></span>
</div>
