J'utilise bootstrap sur mon site et j'ai des problèmes avec la barre de navigation fixe en haut. Lorsque j'utilise la barre de navigation normale, tout va bien. Toutefois, lorsque j'essaie de passer à la barre de navigation fixe en haut, tout le reste du contenu du site se déplace comme si la barre de navigation n'était pas là et la barre de navigation le recouvre :
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
j'ai essayé de copier exactement les exemples de bootstraps, mais j'ai toujours ce problème uniquement lorsque j'utilise la barre de navigation fixe en haut. qu'est-ce que je fais mal ?
Votre réponse se trouve dans la [docs] (http://getbootstrap.com/components/#navbar-fixed-top) :
Rembourrage du corps requis
La barre de navigation fixe se superposera à votre autre contenu, à moins que vous n'ajoutiez
padding
en haut du<body>
. Essayez vos propres valeurs ou utilisez notre extrait ci-dessous. Conseil : par défaut, la barre de navigation a une hauteur de 50px.
body { padding-top : 70px ; }
Assurez-vous d'inclure ces éléments après le CSS Bootstrap de base.
et dans la Documentation Bootstrap 4....
Les barres de navigation fixes utilisent position : fixed, ce qui signifie qu'elles sont tirées du flux normal du DOM.
flux normal du DOM et peuvent nécessiter un CSS personnalisé (par exemple, padding-top sur le
) pour éviter tout chevauchement avec d'autres éléments.
Comme d'autres l'ont dit, l'ajout d'un padding-top au corps fonctionne très bien. Mais lorsque l'écran devient plus étroit (jusqu'à la largeur des téléphones portables), il y a un espace entre la barre de navigation et le corps. En outre, une barre de navigation encombrée peut se transformer en une barre de plusieurs lignes, écrasant à nouveau une partie du contenu.
Cette solution m'a permis de résoudre ce genre de problèmes
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
Cela crée un padding de 40px par défaut et de 0px en dessous de 768px de largeur (ce qui, selon la documentation de bootstrap, est la limite de la mise en page des téléphones portables où l'écart serait créé).
Ce problème est connu et il existe une solution de contournement sur le site twitter bootstrap :
Lorsque vous apposez la barre de navigation, n'oubliez pas de tenir compte de la zone cachée
en dessous. Ajoutez 40px ou plus de padding au
<body>
. Veillez à ajouter après le fichier CSS Bootstrap de base et avant le fichier CSS responsive facultatif. CSS facultatif.
Cela a fonctionné pour moi :
body { padding-top: 40px; }