has-danger不再适用于Bootstrap v4 beta？

According to the Bootstrap migration guide:

根据Bootstrap迁移指南：

Renamed .has-error to .has-danger.

将.has-error重命名为.has-danger。

However, that doesn't seem to work. Border and text has not been coloured.

但是，这似乎不起作用。边框和文字尚未着色。

For example:

例如：

<div class="form-group has-danger">
    <label class="form-control-label" for="inputDanger1">Input with danger</label>
    <input type="text" class="form-control form-control-danger" id="inputDanger1">
    <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
    <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

Demo:

演示：

https://jsfiddle.net/uLa0spfm/

3 个解决方案

#1

Being that Bootstrap 4 is still in Beta, much of the migration documentation is not in sync with actual releases. Validation has changed in beta, and has-danger no longer exists.

由于Bootstrap 4仍然处于测试阶段，因此许多迁移文档与实际版本不同步。验证在测试版中发生了变化，并且已经存在危险。

Also see: Can't make the validation work in Bootstrap 4

另请参阅：无法在Bootstrap 4中进行验证工作

#2

Managed to get it to work. @ZimSystem is correct about this.

管理让它工作。 @ZimSystem对此是正确的。

.has-danger exist in Alpha version but it was removed in Bootstrap v4 Beta. You will need to use is-invalid selector in the input and also include class="invalid-feedback" for error message.

.has-danger存在于Alpha版本中，但它已在Bootstrap v4 Beta中删除。您将需要在输入中使用is-invalid选择器，并且还包括class =“invalid-feedback”以显示错误消息。

Here is example:

这是一个例子：

<div class="form-group has-danger">
    <label class="form-control-label">Username</label>
    <input type="text" class="form-control is-invalid">
    <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
</div>

#3

It would appear that the beta version doesn't have the .has-* classes. As a work around, use the alpha-6 version

看起来测试版没有.has- *类。作为解决方法，请使用alpha-6版本

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

Updated fiddle with new CDN.

更新了新的CDN小提琴。

https://jsfiddle.net/uLa0spfm/1/

#1