Eu tenho esse código de inicialização do Twitter

  <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>

Mas quando estou visualizando o início da página, a barra de navegação está bloqueando parte do conteúdo que fica próximo ao topo da página. Alguma idéia de como fazê-lo baixar o restante do conteúdo para baixo quando a parte superior da página é exibida, para que o conteúdo não seja bloqueado pela barra de navegação?

Adicione ao seu CSS:

body { 
    padding-top: 65px; 
}

Nos documentos do Bootstrap :

A barra de navegação fixa sobrepõe seu outro conteúdo, a menos que você adicione preenchimento à parte superior do corpo.

Adicionar um preenchimento como esse não é suficiente se você estiver usando o bootstrap responsivo. Nesse caso, ao redimensionar sua janela, você terá um espaço entre a parte superior da página e a barra de navegação. Uma solução adequada é assim:

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

No bootstrap 3, a classe em navbar-static-topvez de navbar-fixed-topevitar esse problema, a menos que você precise que a barra de navegação esteja sempre visível.

uma solução muito mais útil para sua referência, funciona perfeitamente em todos os meus projetos:

mude seu primeiro 'div' de

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

para

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

Estou usando o jQuery para resolver esse problema. Este é o trecho para o 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);        
});

Tive um bom sucesso ao criar uma barra de navegação não fixa simulada antes da minha barra de navegação fixa real.

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

O espaçamento funciona muito bem em todos os tamanhos de tela.

No meu projeto derivado do tutorial do MVC 5 , descobri que alterar o preenchimento do corpo não tinha efeito. O seguinte funcionou para mim:

@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;
    }
}

Resolve os casos em que a barra de navegação se dobra em 2 ou 3 linhas. Isso pode ser inserido no bootstrap.css em qualquer lugar após o corpo das linhas {margin: 0; }

O modelo inicial do bootstrap v4 css usa:

body {
  padding-top: 5rem;
}

Como visto neste exemplo do Twitter, adicione-o antes da linha que inclui as declarações de estilos responsivos:

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

Igual a:

<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" />

com navbar navbar-default tudo funciona bem, mas se você estiver usando navbar-fixed-top, precisará incluir um corpo de estilo personalizado {padding-top: 60px;} caso contrário, ele bloqueará o conteúdo abaixo.

Dois problemas acontecerão aqui:

1. Carregamento da página (conteúdo oculto)
2. Links internos como esse rolam para o topo e ficam ocultos pela barra de navegação:

<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 com links de páginas internos

Para corrigir 1), como Martijn Burger disse acima, o modelo inicial do bootstrap v4 css usa:

body {
  padding-top: 5rem;
}

Para corrigir 2), verifique este problema . Esse código funciona principalmente (mas não no segundo clique do mesmo hash):

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

Este código anima os links A com o jQuery (não é o jQuery fino):

  // 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);
    });
  })

A melhor solução que eu encontrei até agora, que não envolve alturas de codificação e pontos de interrupção, é adicionar uma <nav...tag extra à marcação.

<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>

Ao fazê-lo desta maneira, os @mediapontos de interrupção são idênticos, a altura é idêntica (desde que você navbar-brandseja o objeto mais alto no, navbarmas você pode facilmente substituir outro elemento na fixed-topbarra de navegação não) .

Onde isso falha é com os leitores de tela que agora apresentarão 2 navbar-brandelementos. Isso aponta para a necessidade de uma not-for-srclasse para impedir que esse elemento apareça para os leitores de tela. No entanto, essa classe não existe https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Tentei compensar o problema do leitor de tela, aria-hidden="true"mas https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ parece indicar que isso provavelmente não funcionará quando o leitor de tela estiver no modo de foco, que é obviamente a única vez em que você realmente precisa para funcionar ...

usar percentageé muito melhor solução do que pixels.

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

Se necessário, você ainda pode ser explícito, adicionando diferentes breakpointsconforme mencionado em outra resposta por@spajus

EDIT: Esta solução não é viável para versões mais recentes do Bootstrap, onde as classes navbar-inverse e navbar-static-top não estão disponíveis.

Usando o MVC 5, da maneira que corrigi o meu, era simplesmente adicionar meu próprio Site.css, carregado após os outros, com a seguinte linha: body{padding: 0}

e alterei o código no início de _Layout.cshtml, para ser:

<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">

Se sua barra de navegação estiver originalmente na parte superior da página, defina o valor como 0. Caso contrário, defina o valor para data-offset-topcom o valor do conteúdo acima da barra de navegação.

Enquanto isso, você precisa modificar o seguinte css:

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

Adicione isso:

.navbar {
  position: relative;
}

você deveria adicionar

#page {
  padding-top: 65px
}

para não destruir um rodapé pegajoso ou qualquer outra coisa

Adicione ao seu JS:

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

você pode definir margem com base na resolução da tela

@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;
}