Question

我想在检查服务器api的字段有效性时执行表单挂起状态。使用Bootstrap 4 scss代码，我在_form.scss文件中修改了这段代码：

通常，现在设置is-warning，应该将表单输入置于警告状态，其中边框处于警告颜色，但它不起作用，is-valid和is-invalid当然正常工作

我已经检查过与is-warning相关的css是否在Firefox调试器控制台中正确添加，我只是不知道为什么is-warning如果在css中存在，则不应用正确的效果事件。

Answer 1

@include form-validation-state("warning", ...)由于以下行而无法工作：https://github.com/twbs/bootstrap/blob/v4.1.3/scss/mixins/_forms.scss#L55

.form-control,
  .custom-select {
    .was-validated &:#{$state},  // <====
    &.is-#{$state} {
      ...
    }
  }
}

看到:#{$state}吗？它将生成CSS中不存在的:warning。 CSS伪类:valid和:invalid确实存在，因此它们可以工作。

当浏览器遇到他不理解的CSS选择器时，他会忽略整个CSS语句，因此不会应用&.is-#{$state}（&.is-warning）。