web-dev-qa-db-fra.com

Le contour du bouton Bootstrap ne fonctionne pas

Bootstrap est un nouveau venu et j’ai un peu de mal à bien coiffer mes boutons. Je veux un bouton de couleur vert (succès), avec juste un contour comme indiqué sur leur site web ici . Lorsque j'utilise le code suggéré <button type="button" class="btn btn-success-outline">Success</button>, je reçois un bouton gris qui n'a pas de style apparent qui ressemble à ceci ... Quelqu'un pourrait-il m'aider? ?__. Merci!

htmlhtml5twitter-bootstraptwitter-bootstrap-3
12
Snazzy Sauce

J'ai eu un problème similaire. Vous pouvez simplement configurer une règle en CSS selon laquelle elle devrait être OR et remplacer la classe 'btn-success-outline'.

/*Bootstrap button outline override*/
.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .5s;
}

.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

Si vous choisissez la première option avec le CSS ci-dessus, dans votre langage HTML, utilisez:

<button type="button" class="btn btn-success btn-outline">success</button>
9
Abdul Maye

Êtes-vous sûr que les fichiers bootstrap css fonctionnent? Parce que dans ce code <button type="button" class="btn btn-success-outline">Success</button>, il ne spécifie rien, mais btn-success-outline (ce que vous avez dit). Vous devriez vérifier si vos fichiers css fonctionnent ou les autres documents d'amorçage. ça marche pour moi

1
Haydar Öztürk

Si votre Bootstrap fonctionne bien. Alors vous pouvez essayer ce code. 

<button type="button" class="btn btn-success-outline">Success</button>

sVP vérifiez votre parent div. Est-ce que div utilise le css Float? Si utilisation float que btn besoin de clair: les deux;

0
Mamun

Pour votre information, il a été renommé btn-contour- * 

https://github.com/twbs/bootstrap/issues/17719

0
kayex

la raison pour laquelle votre ne fonctionne pas, c'est qu'il est btn-contour-succès pas btn-succès-contour. 

0
daddycardona