O CSS do Bootstrap oculta parte do contêiner abaixo do navbar navbar-fixed-top

127

Eu estou construindo um projeto com o Bootstrap e estou enfrentando pouco problema. Tenho um contêiner abaixo do Nav-top. Meu problema é que parte do meu contêiner está oculta abaixo do cabeçalho nav-top. Não quero usar a margem superior com recipiente. Pls veja abaixo o html no qual estou enfrentando o problema

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>
css  twitter-bootstrap 
— Ajay Beniwal
fonte
Dos documentos de auto-inicialização: Fixo na parte superior Adicione .navbar-fixed-top e lembre-se de levar em conta a área oculta abaixo dela, adicionando pelo menos 40px de preenchimento ao <body>. Adicione isso após o CSS inicial do Bootstrap e antes do CSS responsivo opcional.
— Cs_mgr

Respostas:

215

Isso é tratado adicionando alguns paddingao topo do <body>.

De acordo com a documentação do Bootstrap.navbar-fixed-top , experimente seus próprios valores ou use nosso snippet abaixo. Dica: Por padrão, o valor navbaré 50pxalto.

  body {
    padding-top: 70px;
  }

Além disso, dê uma olhada na fonte deste exemplo e abra starter-template.css.

— Peter
fonte
1
i adicionado 60px preenchimento entre css ágil e css normal e ele funcionou bem
— Ajay Beniwal
1
o problema é .. se eu personalizar o bootstrap através do link de personalização .. então não recebo o css responsivo separadamente ... então não há como fornecer isso "entre" as duas declarações. Além disso, este conselho de adicionar alguma tag entre meu normal e responsivo-CSS parece um pouco tolo. Não é? Tem que haver uma solução melhor do que isso.
— VJ.
Se você estiver usando LESS, use a variável de inicialização @ navbar-height para encontrar a altura da barra de navegação.
— Yankee
3
Isso é mais uma solução alternativa do que uma solução: embora isso ajude na parte superior da página, âncoras e outras ainda não funcionam. Se você rolar para uma subseção usando âncoras, o título da subseção estará atrás da barra de navegação.
— Mašťov
1
por que isso começa a acontecer para começar alguém sabe? apenas começou a acontecer comigo, que parecia do nada e eu ainda não consigo encontrar a fonte do que a quebrou, para começar.
— Taylor Brown
37

Eu acho que o problema que você tem está relacionado à altura dinâmica que a barra de navegação fixa na parte superior tem. Por exemplo, quando um usuário faz login, você precisa exibir algum tipo de " Olá [Nome do Usuário] " e, quando o nome é muito amplo, a barra de navegação precisa usar mais altura para que esse texto não se sobreponha ao menu da barra de navegação . Como a barra de navegação tem o estilo " position: fixed ", o corpo fica embaixo dela e uma parte mais alta fica oculta; portanto, você precisa "dinamicamente" alterar o preenchimento na parte superior sempre que a altura da barra de navegação mudar, o que aconteceria a seguir cenários de caso:

  1. A página é carregada / recarregada.
  2. A janela do navegador é redimensionada, pois isso pode atingir um ponto de interrupção responsivo diferente.
  3. O conteúdo da barra de navegação é modificado direta ou indiretamente, pois isso pode provocar uma alteração de altura.

Essa dinamicidade não é coberta pelo CSS comum, portanto, só posso pensar em uma maneira de resolver esse problema se o usuário tiver o JavaScript ativado. Por favor, tente o seguinte trecho de código jQuery para resolver os cenários de caso 1 e 2; para o cenário do caso 3, lembre-se de chamar a função onResize () após qualquer alteração no conteúdo da barra de navegação :

var onResize = function() {
  // apply dynamic padding at the top of the body according to the fixed navbar height
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};

// attach the function to the window resize event
$(window).resize(onResize);

// call it also when the page is ready after load or reload
$(function() {
  onResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Expandir snippet

— LuckyBrain
fonte
Era isso que eu estava procurando. Otimizei-o armazenando a largura da janela e verificando se apenas o redimensionamento vertical foi alterado.
— Ripside 18/10/16
20

Basta definir uma barra de navegação vazia antes da fixa, ela criará o espaço necessário.

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>
— move.over
fonte
8
Esta é uma maneira desagradável de fazer as coisas.
— DotSlashCoding 19/09/16
Feche, mas não conta com a quebra de itens na barra de navegação real - a menos que você duplique todo o menu lá.
— Ripside 18/10/16
Concorde com @DotSlashCoding, essa abordagem não é uma boa prática de codificação (falha no teste de manutenção sem um bom motivo). Não está claro imediatamente o que esse extra navbarfaz.
— Fragilewindows 07/12
Pragmático e legal. Eu também acho que todas as soluções para esse problema são desagradáveis.
— de.
8

Isso acontece porque com a navbar-fixed-topclasse a barra de navegação recebe o position:fixed. Por sua vez, retira a barra de navegação do fluxo de documentos, deixando o corpo para ocupar o espaço atrás da barra de navegação.

Você precisa aplicar padding-topou margin-topao seu container, com base em seus requisitos com valores>= 50px . (ou brinque com valores diferentes)

A barra de navegação de inicialização básica leva em torno de altura 40px. Então, se você dá um padding-topou margin-topde 50px ou mais, você sempre terá que espaço para respirar entre o recipiente e barra de navegação.

— Praveen Puglia
fonte
6

Eu também tive esse problema, mas o resolvi sem script e usando apenas CSS. Começo seguindo o padding top recomendado para um menu fixo, definindo 60px descrito no site do Bootstrap. Em seguida, adicionei três tags de mídia que redimensionam o preenchimento nos pontos de corte em que meu menu também é redimensionado.

<style>      
    body{
        padding-top:60px;
    }
    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body { padding-top: 60px; }
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        body { padding-top: 110px; }
    }
    @media screen and (min-width: 992px) {
        body { padding-top: 60px; }
    }
</style>

Uma observação: quando a largura do meu menu está entre 768 e 991, o logotipo do menu no meu layout mais o <li> opções fazem com que o menu seja dividido em duas linhas. Portanto, eu tive que ajustar a parte superior do estofamento para impedir que o menu cubra o conteúdo, portanto 110 pixels.

Espero que isto ajude...

— Harvey Mushman
fonte
6

Eu sei que esse tópico é antigo, mas acabei de entrar nesse problema exatamente e o corrigi usando a page-headerclasse na minha página, sob a navegação. Também eu usei a <nav>tag em vez de<div> mas não tenho certeza se ela apresentaria algum comportamento diferente.

Usando o page-headercomo um contêiner para a página, você não precisará mexer com o <body>, apenas se não concordar com o espaço padrão page-headerfornecido.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



   <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top">
    
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Bootstrap</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                </ul>
                <div class="navbar-right">
                </div>
            </div>
        </nav>
    </div>
    <div class="page-header">
        <div class="clearfix">
            <div class="col-md-12">
                <div class="col-md-8 col-sm-6 col-xs-12">
                    <h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
                </div>
            </div>
        </div>
    </div>
        <div class="container">
        <div class="row">
            <form role="form">
                <div class="col-lg-6">
                    <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
                    <div class="form-group">
                        <label for="InputName">Enter Name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Enter Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Confirm Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputMessage">Enter Message</label>
                        <div class="input-group">
                            <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
                </div>
            </form>
    </div>
Expandir snippet

— Zorkind
fonte
3

eu resolvi usando jquery

<script type="text/javascript">
$(document).ready(function(e) {
   var h = $('nav').height() + 20;
   $('body').animate({ paddingTop: h });
});
</script>
Expandir snippet

— CruzDelSur
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.