Asp.net mvc 4 使用Twitter Bootstrap 3放置验证消息的最佳实践是什么

Asp.net mvc 4 使用Twitter Bootstrap 3放置验证消息的最佳实践是什么,asp.net-mvc-4,twitter-bootstrap,twitter-bootstrap-3,Asp.net Mvc 4,Twitter Bootstrap,Twitter Bootstrap 3,我正在使用MVC4,但我想这对于任何使用新的Bootstrap3版本的人来说都是一个问题。由于表单控件现在默认为宽度:100%,那么放置验证消息的最佳实践是什么 在版本2.x中,将验证消息放在输入控件之后的帮助内联范围中最有效,以确保消息放在控件的右侧。 但在版本3中,它们总是被推到底部,使所有控件向下移动,因为验证消息是在控件下强制执行的 <div class="form-group has-error"> <label for="Label" class="col

我正在使用MVC4,但我想这对于任何使用新的Bootstrap3版本的人来说都是一个问题。由于表单控件现在默认为宽度: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>


不过老实说,我认为出现在输入字段下面的消息是可以的,只要它们不会干扰页面布局,并且在出现时不会向下推内容。(这只是一个容器的问题,该容器显示块并具有硬编码的高度。)

聪明的把戏!我想我已经决定只添加第三个“col lg-*”div来包含验证消息,但我将来可能会使用您的方法。