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

【问题标题】：has-danger no longer working on Bootstrap v4 beta?has-danger 不再适用于 Bootstrap v4 beta？
【发布时间】：2018-02-21 01:48:26
【问题描述】：

根据Bootstrap migration guide：

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

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

例如：

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

演示：

https://jsfiddle.net/uLa0spfm/

【问题讨论】：

标签： twitter-bootstrap css bootstrap-4

【解决方案1】：

设法让它工作。 @ZimSystem 对此是正确的。

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

示例如下：

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

【讨论】：

您可以从form-group 中删除has-danger 类。没用的

【解决方案2】：

由于 Bootstrap 4 仍处于测试阶段，大部分迁移文档是 not in sync 与实际版本。 Validation has changed in beta 和 has-danger 不再存在。

另见：Can't make the validation work in Bootstrap 4

【讨论】：

【解决方案3】：

beta 版本似乎没有.has-* 类。作为一种解决方法，请使用 alpha-6 版本

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

用新的 CDN 更新小提琴。

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

【讨论】：

如果您要否决“解决方法” - 至少解释一下原因。