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 类。