Input Tag Helper验证提示显示时的对齐偏移问题求助

原本Input Tag Helper的布局对齐正常，但触发验证显示alert-danger提示时，输入框出现偏移。已尝试设置提示框左对齐，问题仍未解决。

代码示例 #

<div class="row">
    <div class="col-md-10">                    
        <label style="display: inline-block; width: 150px; text-align: right">Last Name:</label>
        <input asp-for="NewUser.LastName"/>
        <label class="alert-danger">@ViewData["LastNameErrorMessage"]</label>
    </div>
</div>   

效果对比 #

• 正常布局：
  
• 验证触发时的偏移效果：
  

方法1：将提示框设为行内块元素 #

alert-danger类默认是块级元素，会占据整行导致输入框偏移。给提示框添加行内块样式，让它和输入框在同一行：

<label class="alert-danger" style="display: inline-block; margin-left: 8px;">@ViewData["LastNameErrorMessage"]</label>

方法2：遵循Bootstrap表单布局规范（推荐） #

既然使用了Bootstrap的栅格类，建议用form-group和栅格嵌套构建布局，避免自定义样式冲突：

<div class="row">
    <div class="col-md-10">
        <div class="form-group row">
            <label asp-for="NewUser.LastName" class="col-sm-3 col-form-label text-right"></label>
            <div class="col-sm-9">
                <input asp-for="NewUser.LastName" class="form-control" />
                @if (!string.IsNullOrEmpty(ViewData["LastNameErrorMessage"]?.ToString()))
                {
                    <div class="alert-danger mt-2">@ViewData["LastNameErrorMessage"]</div>
                }
            </div>
        </div>
    </div>
</div>

这种方式不仅解决偏移问题，还能保证响应式布局的一致性。

方法3：隐藏无内容的提示框 #

当没有错误信息时，不渲染提示框，避免空元素干扰布局：

<div class="row">
    <div class="col-md-10">                    
        <label style="display: inline-block; width: 150px; text-align: right">Last Name:</label>
        <input asp-for="NewUser.LastName"/>
        @if (!string.IsNullOrEmpty(ViewData["LastNameErrorMessage"]?.ToString()))
        {
            <label class="alert-danger" style="display: inline-block; margin-left: 8px;">@ViewData["LastNameErrorMessage"]</label>
        }
    </div>
</div>   

内容的提问来源于stack exchange，提问作者Andy Williams