使用Twitter Bootstrap 3放置验证消息的最佳实践是什么？

Question

我正在使用MVC4，但我想这对任何使用新Bootstrap 3版本的人来说都是一个问题。由于表单控件现在是宽度：默认为100％，放置验证消息的最佳做法是什么？

在版本2.x中，在输入控件最佳工作之后将验证消息放在help-inline范围内，以确保将消息放在控件的右侧。

但是在版本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>

Answer 1

我不会说有表示验证错误的“最佳做法”。这更像是个人设计选择。

根据你想要写多少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>

老实说，我认为出现在输入字段下方的消息很好，只要它们不会打扰页面布局并在内容出现时推送内容。 （这只是一个容器显示块并具有硬编码高度的问题。）