1
votes

Comment remplacer une classe bootstrap qui a déjà! Important dans sa classe

J'essaie de remplacer une classe d'amorçage shadow-sm avec ma propre classe shadow. Voici la classe bootstrap.

pour une raison quelconque, je ne veux pas changer le nom de la classe

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>

J'ai essayé de remplacer avec mon style

.shadow-sm {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
}

mais seul le style bootstrap s'applique

Maintenant, comment puis-je remplacer?

.shadow-sm {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12)!important;
}

.shadow-sm {
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

mon style personnalisé avec la classe que bootstrap a déjà

a essayé la question ci-dessous mais rien ne fonctionne

Comment puis-je remplacer les styles CSS Bootstrap?

Comment puis-je remplacer les classes d'amorçage?

Comment remplacer le bootstrap?

Remplacer le CSS Bootstrap par un CSS personnalisé

html css twitter-bootstrap

0 commentaires

3 Réponses :

0
votes

Ajoutez une classe ou un identifiant à votre élément et attribuez-y vos attributs, exemple

si la classe .imp a! attribut important

div.newclass{
}

Vous devrez accéder au élément comme;

.main .newclass{}

<div class="main">
<div class="imp newclass">
</div>
</div>

1 commentaires

je demandais une méthode de remplacement

0
votes

Cela est lié à la spécificité CSS (essentiellement l'ordre de priorité). Vous pouvez en savoir plus ici: https://www.w3schools.com/css/css_specificity.asp

Dans votre cas:

Vous pouvez super-remplacer les propriétés CSS, en ajoutant une classe supplémentaire de votre choix.

Ajoutons shadow-custom avec la classe shadow-sm .

Ensuite, utilisez les deux pour remplacer le comportement par défaut:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm shadow-custom rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>

.shadow-sm.shadow-custom{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)!important;
}

1 commentaires

oui j'ai essayé cette méthode et cela fonctionne mais je ne peux pas ajouter toutes les classes avec shadow-custom et j'ai demandé la méthode de remplacement

1
votes

Vous devez ajouter le lien vers votre fichier css après le fichier css bootstrap. Il n'est pas nécessaire d'utiliser ! Important pour le faire.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/styles.css" rel="stylesheet" />
<div class="container">
  <div class="row m-2">
    <div class="col-lg-6 col-6 p-1">
      <a class="btn fb btn-block shadow-sm rounded-pill" href="#" role="button"><strong>Facebook</strong></a>
    </div>
  </div>
</div>

3 commentaires

oui cela fonctionne. J'ai nommé le deuxième fichier main-style.css lorsque je le renomme pour le style, il fonctionne maintenant. le nom du fichier doit-il être style.css pouvez-vous également mentionner pourquoi le nom du fichier doit être style.css

Il est plus que probable que le fichier ait été mis en cache localement et en le renommant, vous en avez obtenu une nouvelle copie.

Peut-être que vous devez appuyer sur shift + f5 pour recharger avec le cache effacé après avoir changé certains css