Comment éviter le chevauchement de la barre de navigation sur le contenu de la page dans les mises en page réactives ?

Contenu de page superposé de la barre de navigation : une solution pour des mises en page réactives

Lors de l'utilisation de la barre de navigation supérieure de Twitter Bootstrap avec l'option supérieure fixe, elle peut obstruer contenu situé en haut de la page. Ce problème est particulièrement prononcé dans les mises en page réactives.

Pour garantir que la barre de navigation ne bloque pas le contenu, un remplissage doit être ajouté à l'élément body. Cependant, une valeur de remplissage statique est insuffisante pour les conceptions réactives.

Solution pour les mises en page réactives :

L'extrait de code CSS suivant fournit une solution qui ajuste dynamiquement le remplissage en fonction de la largeur de la fenêtre :

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

Ce code applique un padding-top de 60px à l'élément body. Cependant, lorsque la largeur de la fenêtre tombe en dessous de 979 px, le padding-top est réinitialisé à 0 px. Cela garantit que la barre de navigation ne chevauche pas le contenu sur les écrans plus petits.

Cette solution offre une transition transparente entre une barre de navigation fixe sur les grands écrans et une barre de navigation non fixe sur les écrans plus petits, évitant ainsi tout problème de chevauchement de contenu.

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!