显示时，错误消息会中断布局

Question

我的页面上有以下字段

使用以下HTML

构建

<div style="margin-bottom: 10px" class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
   @Html.TextBoxFor(m => m.Username, new { @class = "form-control", placeholder = "Choose a username (max 25)", Maxlength = "25", autocomplete = "off" })
</div>

非常基本的东西，我目前在我的应用程序中嵌入了jquery表单验证，如下所示：

我删除了除此之外的所有字段。

 $('#registrationForm').validate({
    rules: {
        "Username": "required",

    },
    messages: {
        "Username": "Please enter your chosen Username",

    }
});

当我将该字段留空并按提交时，它看起来像这样

正如您所看到的，已增加用户glyphicon高度以迎合错误消息。

呈现的HTML如下所示：

<div class="input-group" style="margin-bottom: 10px">
 <span class="input-group-addon">
  <i class="glyphicon glyphicon-user"></i>
 </span>
<input id="Username" class="form-control" type="text" value="" placeholder="Choose a username (max 25)" name="Username" data-val-required="The Username field is required." data-val="true" autocomplete="off" maxlength="25">
</div>

有谁能说明为什么会这样？

更新

这是显示错误消息时呈现的内容

<div class="input-group" style="margin-bottom: 10px">
 <span class="input-group-addon">
  <i class="glyphicon glyphicon-user"></i>
 </span>
<input id="Username" class="form-control error" type="text" value="" placeholder="Choose a username (max 25)" name="Username" data-val-required="The Username field is required." data-val="true" autocomplete="off" maxlength="25">
<label class="error" for="Username">Please enter your chosen Username</label>
</div>

**将其他样式添加到.Error类**

后更新

Answer 1

执行此操作时会产生额外的<span>！我想它应该是.error。只需给它一个position: absolute;。

.error {position: absolute; right: 0; width: 100%; bottom: -1em;}

或者只是从.input-group

中取出错误文本

<div style="margin-bottom: 10px" class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
</div>
@Html.TextBoxFor(m => m.Username, new { @class = "form-control", placeholder = "Choose a username (max 25)", Maxlength = "25", autocomplete = "off" })

Answer 2

将以下样式添加到错误消息

sub-tasks list