Bootstrap 表单，在显示 jquery.validation.js 通知时避免输入下移

Question

所以我有一个带有引导输入的表单，我使用的是 jquery.validation.js 库，所以，它工作正常，问题是当显示错误通知时，输入字段和标签会向下移动。 例子：

这是他正常的 state 上的表格：

这是显示这些消息时的表单，您可以看到输入字段和标签向下移动。

Answer 1

我看屏幕上的标签或输入内容并没有向下移动。 但是无论如何，为什么不在输入字段下面包裹div或span并让它占用固定的空间量。 然后在其中显示通知，而不必调整DOM。

Answer 2

您可以为每个输入使用一行，例如：

<div class="row col-md-12"> 

         <div class="col-md-4">  
                        <div class="input-group">
                          <label for="numero">Número de Calle </label> 
                          <input type="number" class="form-control" id="numero" name="numero" placeholder="Número de calle" v-model="documento.rev_nrocalle" v-validate:numero="{required: true, maxlength: 4 }" autocomplete="off" required>
                          <small class="help-block" style="">  <span class="animated" transition="fade"  v-show="$validaciones.numero.required && formIsInvalid"><strong>Introducir un número de calle válido </strong></span></small>
                        </div> 

                    </div> 
</div>

这是避免在我的情况下使用vue.js进行验证的方法

Answer 3

我遇到了这样的情况，并且能够通过更改包含“必需”语句的 div 中的段落元素的高度以及更改我的 div 的边距来解决它，因此请查看是否有这两件事或填充是影响它并改变它的东西。