Twitter Bootstrap - haut de la page nav bar blocage de contenu haut de la page

Question

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 quand je regarde le début de la page, la barre de navigation bloque une partie du contenu qui est près du haut de la page. Toute idée de comment faire baisser le reste du contenu plus bas lorsque le haut de la page est affiché de sorte que le contenu n'est pas bloqué par la barre de navigation?

Answer 1

Ajouter un rembourrage de ce type n'est pas suffisant si vous utilisez un bootstrap réactif. Dans ce cas, lorsque vous redimensionnez votre fenêtre, vous obtenez un espace 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;
  }
}
 

Answer 2

Ajouter à votre CSS:

 body { 
    padding-top: 65px; 
}
 

Answer 3

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

Answer 4

J'utilise jQuery pour résoudre ce problème. Ceci est l'extrait de 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);        
});
 

Answer 5

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 plie en 2 ou 3 lignes. Cela peut être inséré dans bootstrap.css n'importe où après le corps des lignes {margin: 0; }