web-dev-qa-db-fra.com

has-danger ne fonctionne plus sur Bootstrap v4 beta?

Selon le Guide de migration Bootstrap :

Renommé .has-error en .has-danger.

Cependant, cela ne semble pas fonctionner. La bordure et le texte n'ont pas été colorés.

Par exemple:

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

Démo:

https://jsfiddle.net/uLa0spfm/

csstwitter-bootstrapcss3bootstrap-4
12
I'll-Be-Back

Étant donné que Bootstrap 4 est toujours en version bêta, une grande partie de la documentation de migration est non synchronisée avec les versions réelles. la validation a changé en version bêta , et has-danger n'existe plus.

Voir aussi: Impossible de faire fonctionner la validation dans Bootstrap 4

12
Zim

Géré pour le faire fonctionner. @ZimSystem a raison à ce sujet.

.has-danger existe dans la version Alpha mais il a été supprimé dans Bootstrap v4 Beta. Vous devrez utiliser is-invalid sélecteur dans l'entrée et également inclure class="invalid-feedback" pour le message d'erreur.

Voici un exemple:

<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>
20
I'll-Be-Back

Il semblerait que la version bêta ne possède pas le .has-* Des classes. Pour contourner le problème, utilisez la version alpha-6

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

Violon mis à jour avec le nouveau CDN.

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

3
Ashley Brown