J'ai ce code Twitter Bootstrap

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Mais lorsque je regarde le début de la page, la barre de navigation bloque une partie du contenu qui se trouve près du haut de la page. Une idée sur la façon de le faire baisser le reste du contenu plus bas lorsque le haut de la page est affiché afin que le contenu ne soit pas bloqué par la barre de navigation?

Ajoutez à votre CSS:

body { 
    padding-top: 65px; 
}

Depuis les documents Bootstrap :

La barre de navigation fixe superposera votre autre contenu, sauf si vous ajoutez un rembourrage en haut du corps.

Ajouter un rembourrage comme celui-ci ne suffit pas si vous utilisez un bootstrap réactif. Dans ce cas, lorsque vous redimensionnez votre fenêtre, vous obtiendrez un écart entre le haut de la page et la barre de navigation. Une solution appropriée ressemble à ceci:

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

Pour bootstrap 3, la classe navbar-static-topau lieu de navbar-fixed-topprévient ce problème, sauf si vous avez besoin que la barre de navigation soit toujours visible.

une solution beaucoup plus pratique pour votre référence, elle fonctionne parfaitement dans tous mes projets:

changer votre premier «div» de

<div class='navbar navbar-fixed-top'>

à

<div class="navbar navbar-default navbar-static-top">

J'utilise jQuery pour résoudre ce problème. Voici l'extrait pour BS 3.0.0:

$(window).resize(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);        
});

J'ai réussi à créer une barre de navigation factice non fixe juste avant ma vraie barre de navigation fixe.

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

L'espacement fonctionne très bien sur toutes les tailles d'écran.

Dans mon projet dérivé du tutoriel MVC 5, j'ai trouvé que changer le rembourrage du corps n'avait aucun effet. Ce qui suit a fonctionné pour moi:

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

Il résout les cas où la barre de navigation se replie en 2 ou 3 lignes. Cela peut être inséré dans bootstrap.css n'importe où après les lignes body {margin: 0; }

Le modèle de démarrage bootstrap v4 css utilise:

body {
  padding-top: 5rem;
}

Comme on le voit sur cet exemple de Twitter, ajoutez ceci avant la ligne qui inclut les déclarations de styles réactifs:

<style> 
    body {
        padding-top: 60px;
    }
</style>

Ainsi:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

avec navbar navbar-default, tout fonctionne bien, mais si vous utilisez navbar-fixed-top, vous devez inclure un corps de style personnalisé {padding-top: 60px;} sinon cela bloquera le contenu en dessous.

Deux problèmes se produiront ici:

1. Chargement de la page (contenu masqué)
2. Les liens internes comme celui-ci défileront vers le haut et seront masqués par la barre de navigation:

<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

Bootstrap 4 avec liens vers des pages internes

Pour corriger 1), comme Martijn Burger l'a dit ci-dessus, le modèle de démarrage bootstrap v4 css utilise:

body {
  padding-top: 5rem;
}

Pour résoudre 2) consultez ce problème . Ce code fonctionne principalement (mais pas au 2ème clic du même hachage):

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

Ce code anime des liens A avec jQuery (pas slim jQuery):

  // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })

La meilleure solution que j'ai trouvée jusqu'à présent, qui n'implique pas de hauteurs de codage en dur et de points d'arrêt, est d'ajouter une <nav...balise supplémentaire au balisage.

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

En procédant de cette façon, les @mediapoints d'arrêt sont identiques, la hauteur est identique (à condition que vous soyez l' navbar-brandobjet le plus haut dans le navbarmais vous pouvez facilement remplacer un autre élément dans le nonfixed-top barre de navigation .

Là où cela échoue, c'est avec les lecteurs d'écran qui présenteront désormais 2 navbar-brandéléments. Cela indique la nécessité d'une not-for-srclasse pour empêcher cet élément d'apparaître pour les lecteurs d'écran. Cependant, cette classe n'existe pas https://getbootstrap.com/docs/4.0/utilities/screenreaders/

J'ai essayé de compenser le problème du lecteur d'écran avec aria-hidden="true"mais https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ semble indiquer que cela ne fonctionnera probablement pas lorsque le lecteur d'écran est en mode focus qui est bien sûr la seule fois où vous en avez réellement besoin pour travailler ...

l'utilisation percentageest une bien meilleure solution que pixels.

body {
  padding-top: 10%; //This works regardless of display size.
}

Si nécessaire, vous pouvez toujours être explicite en ajoutant différents breakpointscomme mentionné dans une autre réponse par@spajus

EDIT: Cette solution n'est pas viable pour les nouvelles versions de Bootstrap, où les classes navbar-inverse et navbar-static-top ne sont pas disponibles.

En utilisant MVC 5, la façon dont j'ai corrigé le mien, c'était simplement d'ajouter mon propre Site.css, chargé après les autres, avec la ligne suivante: body{padding: 0}

et j'ai changé le code au début de _Layout.cshtml, pour être:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

<div class='navbar' data-spy="affix" data-offset-top="0">

Si votre barre de navigation se trouve à l'origine en haut de la page, définissez la valeur sur 0. Sinon, définissez la valeur de data-offset-top sur la valeur du contenu au-dessus de votre barre de navigation.

En attendant, vous devez modifier le en csstant que tel:

.affix{
  width:100%;
  top:0;
  z-index: 10;
}

Ajoute ça:

.navbar {
  position: relative;
}

vous devez ajouter

#page {
  padding-top: 65px
}

pour ne pas détruire un pied de page collant ou autre chose

Ajoutez à votre JS:

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

vous pouvez définir la marge en fonction de la résolution de l'écran

@media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}