Pourquoi mon style de classe Bootstrap ne prend-il pas effet ?

Question

Je suis donc nouveau en HTML, CSS et bootstrap et je n'arrive pas à mettre à jour la valeur de ma feuille de style en aperçu, voici le libellé de mon bouton et sa valeur :

<button class="btn btn-primary btn-xl">Find out More</button>

Mais quand j'essaie de changer le style de la valeur btn-xl dans mon CSS,

.btn-xl {
    padding: 1rem 2rem;
}

Toutes les modifications que j'apporte n'apparaîtront pas dans l'aperçu. S'il vous plaît, quelqu'un me dit où est-ce que je me trompe ?

J'ai donc essayé de vérifier mes liens, il y a peut-être une erreur dans l'en-tête du lien reliant mon HTML et mon CSS, mais il n'y a rien de mal là-bas. J'ai vérifié les fautes de frappe qui pourraient entrer en conflit, mais ce n'est certainement pas une faute de frappe, donc je suis complètement perdu.

Answer 1

Il semble que votre problème soit dû au fait que Bootstrap remplace la valeur. Il peut s'agir d'un problème lié à l'ordre dans lequel vous avez ajouté les feuilles de style ou d'un problème de spécificité. Si vous changez le nom de la classe, cela devient :

.btn.btn-xl {
    padding: 1rem 2rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.css" rel="stylesheet"/>

<button class="btn btn-primary btn-xl">了解更多</button>

Si vous souhaitez modifier le style de tous les boutons, vous pouvez mettre à jour les variables utilisées par Bootstrap pour ajuster le remplissage.