Maison > Article > interface Web > Comment empêcher les barres de navigation fixes d'obscurcir le contenu de la page dans les conceptions Bootstrap réactives ?
Comment empêcher les barres de navigation fixes d'obscurcir le contenu de la page dans les conceptions Bootstrap réactives ?
- Patricia Arquetteoriginal
- 2024-11-21 04:00:12537parcourir
Résoudre l'obstruction du contenu par la barre de navigation au début de la page
Lors de l'utilisation de la barre de navigation Twitter Bootstrap fixe, il est courant de rencontrer un problème où la barre de navigation obscurcit le contenu de la page en haut. Cet article présente une solution pour résoudre ce problème.
<div class='navbar navbar-fixed-top'></p> <pre class="brush:php;toolbar:false"><div>
Bien que l'ajout d'un simple remplissage à la page puisse sembler une solution :
body {</p><pre class="brush:php;toolbar:false">padding-top: 60px;}
Cette approche est imparfaite pour les conceptions Bootstrap réactives. Lors du redimensionnement de la fenêtre d'affichage, un espace apparaît entre le haut de la page et la barre de navigation.
La bonne solution consiste à utiliser des requêtes multimédias pour ajuster le remplissage de la page en fonction de la largeur de l'écran :
corps {</p><pre class="brush:php;toolbar:false">padding-top: 60px;}
@media (largeur maximale : 979px) {
body {
padding-top: 0px;
}}
Ceci la modification garantit que le contenu de la page ne reste pas obstrué par la barre de navigation tout en conservant une conception cohérente sur différentes tailles d'écran.
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!