验证消息包装

Question

我正在开发一个 MVC 5 应用程序。我有必填字段的验证消息，应该是数字等。验证当前显示方式的图片如下所示（请注意，这两个图像中的字段相同）：

我正在使用引导程序，上面显示的部分的 cshtml 如下：

<div class="row">
    <div class="col-xs-2">@Html.LabelFor(model => model.Name)</div>
    <div class="col-xs-5">
        @Html.TextBoxFor(model => model.Name, new { @class = "form-control input-sm" })
        @Html.ValidationMessageFor(model => model.Name)
    </div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2">
        @Html.TextBoxFor(model => model.Age, new { @class = "form-control input-sm"})
        @Html.ValidationMessageFor(model => model.Age)
    </div>
    <div class="col-xs-1"></div>
</div>
<div class="row">
    <div class="col-xs-2">@Html.LabelFor(model => model.Surname)</div>
    <div class="col-xs-5">
       @Html.TextBoxFor(model => model.Surname, new { @class = "form-control input-sm"})
        @Html.ValidationMessageFor(model => model.Surname)
    </div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2">
       @Html.TextBoxFor(model => model.Salary, new { @class = "form-control input-sm" })
        @Html.ValidationMessageFor(model => model.Salary)
    </div>
    <div class="col-xs-1"></div>
</div>

上图中的字段是年龄和薪水。我想知道如何才能很好地将验证消息放在字段旁边，但又不会像“笨拙”那样 - 我尝试将 @class="clearfix" 添加到 ValidationMessageFor 但它似乎没有达到我的预期。

Answer 1

您可以尝试的一件事是将其放在单独的 div 中：

<div class="col-xs-5">
    @Html.TextBoxFor(
        model => model.Surname,
        new { @class = "form-control input-sm"})
</div>
<div class="col-xs-2">
    @Html.ValidationMessageFor(model => model.Surname)
</div>

Bootstrap 应该更容易使其具有响应性。