has-danger больше не работает на бета-версии Bootstrap v4?

по словам руководство по миграции Bootstrap:

переименован .имеет-ошибка .есть-опасность.

однако это, похоже, не работает. Граница и текст не были окрашены.

например:

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

9
bootstrap-4 css css3 twitter-bootstrap

3 ответов

поскольку Bootstrap 4 все еще находится в бета-версии, большая часть документации по миграции -не в синхронизации С актуальные релизы. проверка изменилась в бета-версии и has-danger больше не существует.

Смотрите также: не может заставить проверку работать в Bootstrap 4

9

удалось заставить его работать. @ZimSystem прав в этом.

.has-danger существует в альфа-версии, но она была удалена в бета-версии Bootstrap v4. Вам нужно будет использовать 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>
11

казалось бы, что бета версия не имеет .has-* классы. Как обойти, используют Альфа-6 версия

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

обновлена скрипка с новым CDN.

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

2