Bootstrap 4 为什么Bootstrap 4 Beta.invalid反馈在字段有效时显示？

我有一个用于Bootstrap4Beta的表单。除了

无效反馈

类之外，它工作得很好。反馈div一开始显示正确，如下所示：

但当我使该字段有效时，该字段将以绿色突出显示，但

无效反馈

div不会隐藏

我按照文档中的HTML进行操作：

<form name="signup" id="needs-validation" novalidate>
  <h1 class="text-center">Signup</h1>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" maxlength="255" v-model="user.name" required>
    <small class="text-muted">Your full legal name.</small>
    <div class="invalid-feedback">
      Please enter your name.
    </div>
  </div>
...

---

在上面的图片中，表单确实有效，帖子正在发布，但反馈文本仍然可见…

我也有同样的问题。显然，这是一个已知的错误与BS 4.0.0beta根据

，但它只会与第二个测试版一起发布，这可能需要几周的时间

同时，您可以自己在mixins/_form.scss文件上应用修复程序，或者如果您喜欢或需要简单地覆盖错误的规则，您可以执行以下操作：

.was-validated .form-control:valid ~ .invalid-feedback,
.was-validated .form-control:valid ~ .invalid-tooltip,
.form-control.is-valid ~ .invalid-feedback,
.form-control.is-valid ~ .invalid-tooltip,
.was-validated .custom-select:valid ~ .invalid-feedback,
.was-validated .custom-select:valid ~ .invalid-tooltip,
.custom-select.is-valid ~ .invalid-feedback,
.custom-select.is-valid ~ .invalid-tooltip {
  display: none;
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip,
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip,
.was-validated .custom-select:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-tooltip,
.custom-select.is-valid ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip {
  display: block;
}

第一条规则将覆盖并确保在输入有效时隐藏无效内容，第二条规则在输入有效时显示有效反馈和工具提示

请注意，这种畸形的CSS直接来自CDN中编译的引导程序，您可以随时删除不用于使其变小的选择器，但最好的方法始终是编辑源SASS文件。我需要这样做，因为我使用的是CDN，只有缩小的CSS可以使用

.was-validated .form-control:valid ~ .invalid-feedback,
.was-validated .form-control:valid ~ .invalid-tooltip,
.form-control.is-valid ~ .invalid-feedback,
.form-control.is-valid ~ .invalid-tooltip,
.was-validated .custom-select:valid ~ .invalid-feedback,
.was-validated .custom-select:valid ~ .invalid-tooltip,
.custom-select.is-valid ~ .invalid-feedback,
.custom-select.is-valid ~ .invalid-tooltip {
  display: none;
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip,
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip,
.was-validated .custom-select:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-tooltip,
.custom-select.is-valid ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip {
  display: block;
}