Espace derrière la barre de navigation bootstrap

À l'aide de la navbar de navbar de bootstrap, j'essaie de comprendre comment faire pour ne pas cacher la partie supérieure de la section du corps.

En fait, il est très bien résolu en utilisant ce qui est recommandé ici:

Twitter Bootstrap – top nav bar bloquant le contenu de la page

Mais il y a encore quelque chose qui ne fonctionne pas: quand vous avez un lien comme ceci:

 <li><a href="#section1">Go to Section 1</a></li> <li><a href="#section2">Go to Section 2</a></li> <li><a href="#section3">Go to Section 3</a></li> <li><a href="#section4">Go to Section 4</a></li>

 <h4 id="Section 1">Section 1</h4> <p>Content of Section 1</p> <p><a href="#">Back to Top</a></p> <h4 id="Section 2">Section 2</h4> <p>Content of Section 2</p> <p><a href="#">Back to Top</a></p> <h4 id="Section 3">Section 3</h4> <p>Content of Section 3</p> <p><a href="#">Back to Top</a></p> <h4 id="Section 4">Section 4</h4> <p>Content of Section 4</p> <p><a href="#">Back to Top</a></p>

Dans ce cas, lorsque vous cliquez sur, par exemple, le lien direct de la section 2 (ou le raccourci), la page se déplace correctement jusqu'à la section 2, mais elle cache le début derrière la barre de navigation bootstrap.

Quelque indice de la façon de réparer?

En ajoutant: psuedo-selector cible à un CSS lié, vous pouvez appliquer un rembourrage défini à votre lien sélectionné (à condition qu'il s'affiche dans votre navigateur comme suit: http://www.example.com # link1).

J'ai passé les 2 dernières heures à essayer de rechercher sur le Web en essayant de trouver Jquery ou JS pour appliquer le rembourrage à la division cible et après avoir modifié mes termes de recherche Google, j'ai trouvé cela

Il pourrait y avoir un moyen d'en infirmer les anciens navigateurs, mais pour le moment, cela me rend un bon campeur.

Mettez un rembourrage supérieur sur votre <h4> pour rendre compte de la navbar votre navbar . Je l'ai mis dans votre CSS:

 h4 { padding-top: 30px; }

Bien sûr, changez 30px pour vous de hauteur de navbar actuelle.

J'ai eu le même problème et je n'ai pas trouvé de solution réelle, mais il n'y avait que plus de solutions de contournement (comme le «rembourrage», qui me semble très difficile). On dirait que le problème de la barre supérieure n'est toujours pas résolu, les gens tentent de le contourner de quelque façon.

Un travail non invasif qui fonctionne pour moi (aussi bon que possible) est d'ajouter le JavaScript suivant à la page (en dehors du hack "padding-top"):

 var shiftWindow = function() { scrollBy(0, -50) }; if (location.hash) shiftWindow(); window.addEventListener("hashchange", shiftWindow);

J'ai trouvé cela dans un commentaire sur un problème GitHub bootstrap . Cependant, la fonction n'est pas exécutée dans toutes les occasions nécessaires (p. Ex. Lors de la nouvelle ancre).

Un travail de travail plus fiable déplace les positions d'ancrage à l'aide du positionnement relatif CSS (trouvé dans cette réponse StackOverflow :

 a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

Cependant, cela est plus invasif parce que vous devez donner à vos ancêtres une classe (pour le distinguer des liens). Donc, vous devez mettre à jour tout votre code HTML d'ancrage (ce qui peut ne pas toujours être possible, par exemple lorsque vous traitez un CMS rigide qui génère vos ancres):

 <a class="anchor" id="top"></a>