css - Bootstrap : Glyphicon icon going out of the input boxes right edge

Question

我试图在带有 bootstrap(bootstrap.min.css) 的表单中添加用于验证的字形图标，但我不希望表单的输入字段拉伸(stretch)并跨越整个浏览器的宽度窗口

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

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

这是发生了什么

右边的字形超出了输入主体

Answer 1

你需要为输入和字形添加一个类

并给定相对位置的类

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

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