Estou usando bootstrap no meu site e estou tendo problemas com a parte superior fixa da barra de navegação. Quando estou apenas a usar a barra de navegação normal, tudo está bem. No entanto, quando tento mudar para o topo fixo da barra de navegação, todos os outros conteúdos do site mudam para cima como se a barra de navegação estivesse't lá e a barra de navegação sobrepõe-se a ela. aqui's basicamente como eu a expus:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
eu tentei copiar exemplos de bootstraps exatamente, mas ainda tendo este problema apenas quando usando a barra de navegação fixa. o que eu estou fazendo de errado?
A sua resposta está correcta em docs:
Forro para o corpo necessário
A barra de navegação fixa irá sobrepor o seu outro conteúdo, a menos que você adicione
`. Experimente os seus próprios valores ou utilize o nosso snippet abaixo. Dica: Por padrão, a barra de navegação tem 50px de altura.padding' ao topo do
corpo { almofada-top: 70px; }
Certifique-se de incluir este após o núcleo do Bootstrap CSS.
e no Bootstrap 4 docs...
posição de uso das barras de navegação fixas: fixas, o que significa que são puxadas do fluxo normal do DOM e pode exigir CSS personalizado (por exemplo, almofada-top on the < body>) para evitar a sobreposição com outros elementos.
Como outros já afirmaram, acrescentar um tapete ao corpo funciona muito bem. Mas quando você torna a tela mais estreita (para a largura do celular), há um espaço entre a barra de navegação e o corpo. Além disso, uma barra de navegação cheia pode envolver uma barra de várias linhas, sobrescrevendo parte do conteúdo novamente.
Isto resolveu este tipo de problemas para mim.
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}
Isto faz um acolchoamento de 40px por defeito e 0px quando a largura é inferior a 768px (que de acordo com a bootstrap's docs é o corte do layout do telemóvel onde o espaço seria criado)
Esta edição é conhecida e lá's uma alternativa no site do twitter bootstrap:
Quando você afixar a barra de navegação, lembre-se de contabilizar a área oculta por baixo. Adicione 40px ou mais de acolchoamento ao
<body>
. Não se esqueça de adicionar isto depois do Bootstrap CSS central e antes do CSS de resposta opcional CSS.
Isto funcionou para mim:
body { padding-top: 40px; }