Bootstrap：Glyphicon图标从输入框右边缘出来

Question

我试图在bootstrap（bootstrap.min.css）的表单中添加用于验证的glyphicons，我不希望表单的输入字段拉伸并跨越宽度整个浏览器窗口

所以我在Grid中包含了Input字段（col-sm-x），现在我想使用输入框右侧的glyphicons进行验证。 当我删除网格样式它工作正常，但我不希望输入字段字段宽，并使用glyphicons 这是代码

    <div class="form-group has-success has-feedback">
        <label class='control-label' for='p_name'>Name of Corner: </label>
        <div class='row'>
            <div class='col-sm-4'>
                <input id='p_name' name='p_name' type='text' class='form-control' placeholder="Santy's Burgers">
                <span class='glyphicon glyphicon-ok form-control-feedback' area-hidden='true'></span>
            </div>
        </div>
    </div>

发生了什么

右侧的glyphicon位于输入正文之外

Answer 1

您需要为输入和字形添加类，如

                                 

给定位置相对

＆＃13;

＆＃13;

.right-inner-addon {
    position: relative;
}

＆＃13;

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css"/>
<div class="form-group has-success has-feedback">
        <label class='control-label' for='p_name'>Name of Corner: </label>
        <div class='row'>
            <div class='col-sm-4'>
              <div class="right-inner-addon">
                <input id='p_name' name='p_name' type='text' class='form-control' placeholder="Santy's Burgers">
                <span class='glyphicon glyphicon-ok form-control-feedback' area-hidden='true'></span></div>
            </div>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;