jquery - 通过验证阻止 Font Awesome 图标以 Bootstrap 形式拉伸(stretch)

Question

我正在使用 Bootstrap 3 构建一个表单，并希望使用 Font Awesome 在字段中拥有一个漂亮的图标。

当我使用 bootstrapvalidator 应用验证时，图标会拉伸(stretch)以容纳错误消息。

知道如何将图标保留在表单字段内吗？

HTML:

<div class="container">
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="page-header">
            <h2>Sign up</h2>
        </div>

        <form id="registrationForm" method="post" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label">Username</label>
                <div class="input-group col-sm-5">
                    <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                    <input type="text" class="form-control" name="username" />
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-9 col-sm-offset-3">
                    <button type="submit" class="btn btn-default">Sign up</button>
                </div>
            </div>
        </form>
    </div>
</div>

JS:

$(document).ready(function() {
$('#registrationForm').bootstrapValidator({
    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        username: {
            message: 'The username is not valid',
            validators: {
                notEmpty: {
                    message: 'The username is required and cannot be empty'
                }
            }
        }
    }
});
});

图标高度被拉伸(stretch)的示例:

参见JSFiddle .

Answer 1

只需将“input-group”类放入“col-sm-5”div 内的另一个div 中即可。固定代码:

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="page-header">
                <h2>Sign up</h2>
            </div>

            <form id="registrationForm" method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3 control-label">Username</label>
                    <div class="col-sm-5">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                            <input type="text" class="form-control" name="username" />
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9 col-sm-offset-3">
                        <button type="submit" class="btn btn-default">Sign up</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>