CSS bootstrap l'emporte sur mon fichier css

**momjunior** · 09/03/2018, 12h10

Bonjour

J'utilise bootstrap pour mon site mais je n'arrive pas à changer le padding de mon navbar. En effet , dans bootstrap, le padding du navbar est défini comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.navbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

Mais lorsque je change le padding dans mon fichier css,celui-ci n'est pas pris en compte, c'est-à-dire que c'est le padding du bootstrap qui est pris en compte:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.navbar {
padding: 1px 1px;
}

Et normalement ce n'est pas pratique de supprimer le padding du bootstrap.

Merci

**psychadelic** · 09/03/2018, 12h43

tout dépends de l'ordre dans lesquels tu places tes instructions css et des priorités éventuelles..

**momjunior** · 09/03/2018, 22h55

J'ai pas bien compris. Je pensais que mes instructions css avaient la priorité sur le bootstrap, quelque soit leur position.

**psychadelic** · 10/03/2018, 00h31

non, le principe c'est que pour un élément ayant plusieurs "commandes css" c'est la derniere qui l'emporte.

donc tu dois placer le <link rel="stylesheet" href=".../bootstrap.min.css"> avant.

donc :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8"> 
 
<link rel="stylesheet" href=".../bootstrap.min.css">
<style>
  .navbar {
     padding: 1px;
  }
 
... etc

après tu peux aussi vérifier dans le débogueur de ton navigateur quels valeurs styles sont appliquées

Invité · 10/03/2018, 10h05

Bonjour,

À LIRE : Règles d'application des styles CSS et gestion des conflits

On peut aussi :

augmenter le poids du sélecteur : #menu .navbar à plus de poids que .navbar seul
ajouter dans l'instruction : !important; pour forcer la priorité

**momjunior** · 12/03/2018, 12h27

Ok ça marche, je savais pas qu'il fallait placer le bootstrap avant le css. Merci

Et merci aussi à jreaux62, ton lien m'a aussi aidé.

CSS bootstrap l'emporte sur mon fichier css

Framework CSS Bootstrap

Discussions similaires

Partager

Partager