Jquery 通过验证停止引导表单中的字体图标拉伸

我正在用Bootstrap3构建一个表单，希望在字段中使用字体Awesome创建一个漂亮的图标

当我使用bootstrapvalidator应用验证时，图标会拉伸以适应错误消息

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

HTML:

注册 用户名 注册

JS:

$document.readyfunction{ $'registrationForm'.bootstrapValidator{ //要使用反馈图标，请确保使用Bootstrap v3.1.0或更高版本 反馈图标：{ 有效：“glyphicon glyphicon ok”， 无效：“glyphicon glyphicon删除”， 正在验证：“glyphicon glyphicon刷新” }, 字段：{ 用户名：{ 消息：“用户名无效”， 验证器：{ 注意：{ 消息：“用户名是必需的，不能为空” } } } } }; }; 正在拉伸的图标高度示例：

---

请参阅。

只需将输入组类放在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>

---

只需将输入组类放在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>

---

我也有同样的问题，但我使用的是ASP.NETMVC。 我通过将@Html.ValidationMessageFor部分移到“input group”div之外解决了这个问题

<div class="form-group">
     @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
     <div class="col-sm-4 input-group">
         <span class="input-group-addon">
         <span class="fa fa-user"></span></span>
         @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", placeholder = "user name" })
      </div>
      @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "col-sm-offset-2" })
</div>  

---

HTH

我也有同样的问题，但我使用的是ASP.NET MVC。 我通过将@Html.ValidationMessageFor部分移到“input group”div之外解决了这个问题

<div class="form-group">
     @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
     <div class="col-sm-4 input-group">
         <span class="input-group-addon">
         <span class="fa fa-user"></span></span>
         @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", placeholder = "user name" })
      </div>
      @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "col-sm-offset-2" })
</div>  

嗯