Question

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

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

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

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'
                }
            }
        }
    }
});
});

拉伸图标高度的示例：
enter image description here

请参阅JSFiddle。

Answer 1

只需输入＆＃34;输入组＆＃34;另一个div里面的课程＆＃34; col-sm-5＆＃34; 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>

Answer 2

我遇到了同样的问题，但我使用的是ASP.NET MVC 我通过移动＆＃39; input-group＆＃39;之外的@ Html.ValidationMessageFor部分解决了这个问题。 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

使用验证在Bootstrap表单中拉伸字体Awesome图标

2 个答案: