表单输入反馈在Bootstrap中有一个按钮插件时位置错误

时间:2014-12-06 21:24:19

标签: css twitter-bootstrap

我已在表单的输入字段中添加了反馈和按钮插件。我的HTML如下:

<div class="form-group has-feedback">
    <label class="col-sm-4 control-label" for="authorization_id">AutorisationsID</label>
    <div class="col-sm-4">
        <div class="input-group">
            <input name="authorization_id" class="form-control" type="text">
            <span class="glyphicon form-control-feedback"></span>
            <span class="input-group-btn">
                <a href="#" id="authid-info-btn" tabindex="0" class="btn btn-info" role="button" data-position="auto right" data-container="body" data-toggle="popover" data-trigger="click" data-content="And here's some amazing content. It's very engaging. Right?">
                    <span class="glyphicon glyphicon-question-sign">
                </a>
            </span>
        </div>
    </div>
    <div class="col-sm-4 control-label control-label-left-align"></div>
</div>

这就是它的样子:

enter image description here

这就是我想要它的样子

enter image description here

当存在按钮插件时,反馈定位错误。我错过了什么或者Bootstrap不支持这种设计吗?

1 个答案:

答案 0 :(得分:2)

我把你的内容变成了一个小提琴:http://jsfiddle.net/DTcHh/2459/

但我不知道如何让X出现。你有什么方法可以在小提琴中效仿吗?

这将是

.redX {
position: relative;
left: -10px;
}

或者可能对边距或填充进行小幅调整。这可能是很多事情,但很可能是css中的简单修复。一个现实的例子是最好的,真的。