Question

我正在尝试使用has-feedback表单类在表单字段上添加图标，但是使用输入字段大小调整，图标显示超出界限，下面是问题的解答：

<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>

仅当字段的默认大小为包含表单的100％时才有效。

如何控制字段大小并允许正确显示图标？

Answer 1

昨天遇到同样的问题。

通过添加此css解决了这个问题。只需编辑顶部和右侧位置以适合您的设计。

.has-feedback .form-control-feedback {
    position: absolute;
    top: 3px;
    right: 15px;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
}

Answer 2

我今天遇到了类似的问题。我想在表格中的输入元素之后添加一个来自bootstrap的图标。但我面临同样的问题，图标在下一行呈现。

在：

<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>

我通过在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>

现在，在同一行的输入元素之后显示图标。这解决了我的问题。

Answer 3

我发现上面提到的绝对定位答案有几个问题 - 特别是标签延伸到两行和输入而不是文本字段。

作为一项实验，我已经将glyphicon移动到更符合消息的内容，添加到其他一些输入类型中并撒在一些咏叹调中：

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>

Bootstrap 3具有与字段大小调整的反馈图标对齐似乎不起作用

3 个答案: