Javascript 错误消息在显示时中断布局

我的页面上有以下字段

它是用以下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>

当我将字段留空并按submit时，看起来是这样的

如您所见，用户图标高度已增加，以适应错误消息

呈现的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类后更新**

执行此操作时会生成一个额外的

！我想应该是

。error

。只需给出一个

位置：绝对到它

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

或者从
输入组中取出错误文本：

<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" })


@Html.TextBoxFor（m=>m.Username，新建{@class=“form control”，placeholder=“选择用户名（最大25）”，Maxlength=“25”，autocomplete=“off”}）
将以下样式添加到错误消息中

position : absolute

您能检查元素并显示生成的
吗？我添加了绝对位置，但错误消息出现在文本框的同一行，但在最后，它被压扁了（无法读取）。如果我使用您提供的HTML，则glyphicon用户不再位于框的旁边，而是显示在顶部。这不是我想要的want@ScottAtkinson请通过检查其中的元素来更新生成的HTML。我们可以很容易地把它向前推进。请记住，您只需要使用一个，position absolute或div之外的HTML。我已经更新了style.error以获得absoluteGood的位置。正如所料。当你给出绝对值时会发生什么？发布截图！错误消息显示在文本框的右侧，但其全部被压扁且不可读。
position : absolute