css - Bootstrap 图标与输入组对齐

Question

我有 n 个这样的输入组:

<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control" id="username" name="username" placeholder="Username" type="text">
</div>

这是它的样子:

这是一个 codepen .

我正在使用 jQuery 验证，它添加了一个带有错误消息的错误类，但这会拉伸(stretch)前置图标。

错误的html:

<div class="input-group has-error">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input class="form-control error" id="username" name="username" type="text">
<span class="help-block form-error">This user name is already registered.</span></div>

这就是它的样子:

如何使图标保持相同的高度并内嵌错误消息？

Answer 1

您需要在input-group 之外追加错误信息

查看演示 HERE

试试这个:

JS:

$(document).ready(function(){
  $('#registration-form').validate({
      rules: {
        name: {
          required: true,
          required: true
        },

        username: {
          minlength: 6,
          required: true
        },
        phone: {
          minlength: 8,
          required: true
        },
        password: {
          required: true,
          minlength: 6
        },
        confirm_password: {
          required: true,
          minlength: 6,
          equalTo: "#password"
        },

        email: {
          required: true,
          email: true
        },

        address: {
          minlength: 10,
          required: true
        },

        agree: "required"

      },
      highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
      },
      unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
      },
      errorElement: 'span',
      errorClass: 'help-block',
      errorPlacement: function(error, element) {
        if (element.parent('.input-group').length) {
          error.insertAfter(element.parent());
        } else {
          error.insertAfter(element);
        }
      },
      success: function(label) {
        label.addClass("valid").text("Ok!")
      }

    });
});