CSS3 Bootstrap 4 如何处理内联输入的输入错误信息

Question

我目前在同一行上有 2 个输入字段需要使用 vee-validate 进行验证（我正在使用 Vue.js）。

验证消息显示在 input-group 的末尾，而不是里面。

这里是 html 代码：

<div class="form-group row d-flex justify-content-center">
  <div class="input-group input-group-lg col-md-3" >
    <input v-validate="'required'" name="username" v-model="username" type="text" class="form-control" placeholder="Your Name" aria-label="Name">
     <span v-show="errors.has('username')" class="help is-danger">{{ errors.first('username') }}</span>
  </div>
  <div class="input-group input-group-lg col-md-4" >
    <input v-validate="'required|email'" name="email" v-model="email" type="text" :class="{'input': true, 'is-danger': errors.has('email') }" class="form-control" placeholder="Your Email Address" aria-label="Email">
     <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
  </div>
</div>

我的代码有什么问题？

Answer 1

在您的错误文本中使用 Bootstrap .help-block class。

CSS3 Bootstrap 4 如何处理内联输入的输入错误信息

CSS3 Bootstrap 4 How to handle theinput error message with inline inputs

css

vue.js

vee-validate