Maison > interface Web > tutoriel CSS > 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 Arquette

Libérer： 2024-11-21 04:00:12

original

568 Les gens l'ont consulté

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Copier après la connexion

Bien que l'ajout d'un simple remplissage à la page puisse sembler une solution :

body {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">padding-top: 60px;

Copier après la connexion

Copier après la connexion

}

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><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">padding-top: 60px;