引导图标与输入组对齐答案

【问题标题】：Bootstrap Icon alignment with input group引导图标与输入组对齐
【发布时间】：2020-12-01 11:46:18
【问题描述】：

我有 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 验证，它添加了一个带有错误消息的错误类，但这会拉伸前置图标。

有错误的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>

这就是它的样子：

如何保持图标高度相同并内联包含错误消息？

【问题讨论】：

标签： css twitter-bootstrap glyphicons

【解决方案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!")
      }

    });
});

【讨论】：

【解决方案2】：

您必须在输入框中进行一些样式设置！试试这个：

<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" style="height: auto;">
<span class="help-block form-error">This user name is already registered.</span></div>

【讨论】：