验证消息包装

Question

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

我正在使用bootstrap，上面显示的部分的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>

上图中的字段是年龄和薪水。我想知道如何在字段旁边很好地符合验证信息，但不是因为“笨拙的”＃39; clunky＆＃39; - 我尝试添加@class =＆＃34; clearfix＆＃34;到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应该可以更容易地做出响应。