Comment réparer le contenu du site Web bloquant la barre de navigation dans Twitter Bootstrap ?

La barre de navigation bloque le contenu du site Web

Ce problème survient lors de l'utilisation de la barre de navigation supérieure de Twitter Bootstrap. Initialement, les utilisateurs peuvent observer que le contenu est obstrué par la barre de navigation lorsqu'ils consultent le haut de la page. Pour remédier à ce problème et empêcher le blocage du contenu, la solution suivante peut être mise en œuvre :

Comme suggéré dans la réponse, le simple ajout d'un remplissage pour pousser le contenu vers le bas est insuffisant pour les frameworks Bootstrap réactifs. Lors du redimensionnement de la fenêtre du navigateur, un espace peut apparaître entre le haut de la page et la barre de navigation.

Par conséquent, une approche plus globale est recommandée :

body {
  padding-top: 60px;
}

@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Ce code CSS ajoute un remplissage supérieur de 60 px. au corps, poussant efficacement le contenu principal sous la barre de navigation. Cependant, pour les mobiles ou les tailles d'écran plus petites (largeurs d'écran inférieures à 979 px), le rembourrage supérieur est supprimé pour éviter les problèmes de chevauchement.

En mettant en œuvre cette solution, les utilisateurs peuvent s'assurer que la barre de navigation reste fixe en haut de l'écran. page mais ne perturbe plus l'expérience de visionnage du contenu à proximité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!