1
votes

Avoir du mal à obtenir des boutons circulaires dans bootstrap 4

J'ai utilisé ce violon directement dans mon code. L'idée est de créer un bouton circulaire.

Ce code est pour bootstrap 3 cependant. Lorsque vous l'utilisez en référence à bootstrap 4, le bouton est carré plutôt que circulaire. Voici un exemple:

https://jsfiddle.net/NibblyPig/fsedc5p6/ a>

Le CSS qu'il applique est:

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

Comme pour tous les boutons, je règle les classes sur btn et btn-success (ou similaire) ainsi que cette classe aussi.

En vérifiant l'inspecteur, il l'applique définitivement, mais quelque chose doit remplacer ou modifier ce comportement car il apparaît carrée.

Je ne trouve aucune explication ou code de travail via google qui produira un bouton circulaire dans bootstrap 4. Y a-t-il un conseil?

css bootstrap-4

1 commentaires

Je ne suis pas sûr, les deux jsfiddles ur ont un bouton circulaire, sont-ils tous les deux des exemples BS3 ou? de toute façon, appliquer border-radius: 50%; ne fait pas le travail?

3 Réponses :

0
votes

Besoin de mettre à jour -webkit-looks: none;

Vérifiez le violon https://jsfiddle.net/f46ab37x/

0 commentaires

3
votes

C'est parce que le .btn-success était remplacé par un border-color . Vous pouvez les cibler tous les deux en utilisant .btn-success.btn-circle . Essayez également de remplacer les styles de survol.

Ajout de CSS:

.btn-circle.btn-success {
  border-color: transparent;
}

.btn-circle.btn-success:hover {
  border-color: transparent;
}

Démo JSfiddle a>

0 commentaires

0
votes

Si vous utilisez alors ajoutez simplement border-radius: 50%! important et padding: 1.375rem 0.75rem! important; à .btn.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

.btn {
  border-radius: 50%!important;
  padding: 1.375rem 0.75rem!important;
}

2 commentaires

L'ajout de ce CSS dans le jsfiddle ne donne pas de bouton circulaire jsfiddle.net/NibblyPig/fsedc5p6/1

@NibblyPig En fait, cela fonctionne pour bouton.Comme vous le voyez dans jsfiddle, c'était un lien de type bouton. J'ai donné la solution pour