我正在使用MVC4,但我想这对任何使用新Bootstrap 3版本的人来说都是一个问题.由于表单控件现在是宽度：默认为100％,放置验证消息的最佳做法是什么？
在版本2.x中,在输入控件最佳工作之后将验证消息放在帮助内联范围内,以确保将消息放在控件的右侧.
但是在版本3中,它们总是被推到底部,使得所有控件都向下移动,因为验证消息是强制控制的.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">required</span></span></span>
</div>
</div>
我已经考虑在这样的新列上手动设置它们(如下所示),但想知道是否有更可接受的方式或更少的手动方式来处理这个问题.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">required</span></span></p>
</div>
</div>
解决方法
我不会说有表示验证错误的“最佳实践”.这更像是个人设计选择.
根据你想写多少JS,你可以得到一点点光滑并插入一个输入组插件,它在工具提示图标中保存一条错误消息,就像这样……
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
老实说,我认为出现在输入字段下面的消息很好,只要它们不会打扰页面布局并在内容出现时推送内容. (这只是一个容器显示块并具有硬编码高度的问题.)
