Bootstrap: Glyphicon 图标超出输入框右边缘

Question

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

所以我将输入字段包含在网格中（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

你需要在输入中添加一个 class 和像

这样的字形

并给定 class 相对位置

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

Bootstrap: Glyphicon 图标超出输入框右边缘

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

css

twitter-bootstrap

glyphicons