Bootstrap css nasconde la parte del contenitore sotto navbar navbar-fixed-top

127

Sto costruendo un progetto con Bootstrap e sto affrontando un piccolo problema. Ho un contenitore sotto Nav-top. Il mio problema è che una parte del mio contenitore è nascosta sotto l'intestazione nav-top. Non voglio usare il margine superiore con contenitore. Per favore vedi sotto html in cui sto affrontando il 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

Dai documenti bootstrap: risolto verso l'alto Aggiungi .navbar-fixed-top e ricorda di tenere conto dell'area nascosta sottostante aggiungendo almeno 40 pixel al <body>. Assicurati di aggiungere questo dopo il CSS di Bootstrap principale e prima del CSS reattivo opzionale.

— cms_mgr

215

Questo viene gestito aggiungendone alcuni paddingall'inizio <body>.

Secondo la documentazione di Bootstrap su.navbar-fixed-top , prova i tuoi valori o usa il nostro frammento di seguito. Suggerimento: per impostazione predefinita, navbarè 50pxelevato.

  body {
    padding-top: 70px;
  }

Inoltre, dai un'occhiata alla fonte per questo esempio e apri starter-template.css.

— Peter
fonte

1

ho aggiunto un'imbottitura 60px tra CSS reattivo e CSS normale e ha funzionato bene

— Ajay Beniwal

1

il problema è ... se personalizzo il bootstrap tramite il collegamento personalizza ... allora non ricevo i CSS reattivi separatamente ... quindi non c'è modo di fornire questo "tra" le due dichiarazioni. Anche questo consiglio di aggiungere qualche tag tra il mio normale e reattivo css .. sembra un po 'di hacker. No? Ci deve essere una soluzione migliore di questa.

— VJ.

Se stai usando MENO, usa la variabile bootstrap @ navbar-height per trovare l'altezza della barra di navigazione.

— yankee,

3

Si tratta più di una soluzione alternativa che di una soluzione: mentre questo aiuta con la parte superiore della pagina, le ancore e simili non funzionano ancora. Se scorri fino a una sottosezione utilizzando le ancore, il titolo della sottosezione sarà dietro la barra di navigazione.

— mastov,

1

perché questo inizia per cominciare con qualcuno lo sa? è appena iniziato a succedere a me che sembrava dal nulla e ancora non riesco a trovare la fonte di ciò che l'ha rotto per cominciare.

— Taylor Brown,

37

Immagino che il problema che hai sia legato all'altezza dinamica che ha la barra di navigazione fissa in alto. Ad esempio, quando un utente accede, è necessario visualizzare una sorta di " Hello [Nome utente] " e quando il nome è troppo ampio, la barra di navigazione deve utilizzare più altezza in modo che questo testo non si sovrapponga al menu della barra di navigazione . Poiché la barra di navigazione ha lo stile " posizione: fissa ", il corpo rimane al di sotto di essa e una parte più alta di essa viene nascosta, quindi è necessario "dinamicamente" cambiare l'imbottitura nella parte superiore ogni volta che l' altezza della barra di navigazione cambia, cosa che succederebbe nel seguente scenari di casi:

La pagina viene caricata / ricaricata.
La finestra del browser viene ridimensionata in quanto ciò potrebbe colpire un diverso punto di interruzione reattivo.
Il contenuto della barra di navigazione viene modificato direttamente o indirettamente in quanto ciò potrebbe provocare un cambiamento di altezza.

Questa dinamica non è coperta dai normali CSS, quindi posso solo pensare a un modo per risolvere questo problema se l'utente ha JavaScript abilitato. Prova il seguente frammento di codice jQuery per risolvere i casi 1 e 2; per lo scenario del caso 3, ricorda di chiamare la funzione onResize () dopo qualsiasi modifica del contenuto della barra di navigazione :

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>

Espandi frammento

— LuckyBrain
fonte

Questo è quello che stavo cercando. Ottimizzato memorizzando la larghezza della finestra e controllando se è stato modificato solo il ridimensionamento verticale.

— Ripside,

20

Basta definire una barra di navigazione vuota prima di quella fissa, creerà lo spazio necessario.

<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

Questo è un brutto modo di fare le cose.

— DotSlashCoding

Chiudi, ma non tiene conto dell'involucro degli elementi nella barra di navigazione reale, a meno che non duplichi tutto il menu lì.

— Ripside,

Concordo con @DotSlashCoding, questo approccio non è una buona pratica di codifica (non supera il test di manutenibilità senza una buona ragione). Non è chiaro subito cosa navbarfaccia questo extra .

— fragilewindows

Pragmatico e cool. Penso anche che tutte le soluzioni a questo problema siano brutte.

— de.

8

Succede perché con la navbar-fixed-topclasse la barra di navigazione ottiene il position:fixed. Questo a sua volta toglie la barra di navigazione dal flusso del documento lasciando al corpo di occupare lo spazio dietro la barra di navigazione.

È necessario applicare padding-topo margin-topal tuo container, in base alle tue esigenze con valori >= 50px. (o giocare con valori diversi)

La navbar di bootstrap di base prende altezza 40px. Quindi, se si dà un padding-topo margin-topdi 50px o più, si avrà sempre quel respiro tra il contenitore e la barra di navigazione.

— Praveen Puglia
fonte

6

Anch'io ho avuto questo problema ma l'ho risolto senza script e usando solo CSS. Comincio seguendo il padding-top consigliato per un menu fisso impostando 60px descritto sul sito Web Bootstrap. Quindi ho aggiunto tre tag multimediali che ridimensionano l'imbottitura nei punti di interruzione in cui anche il mio menu viene ridimensionato.

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

Una nota, quando la larghezza del mio menu è compresa tra 768 e 991, il logo del menu nel mio layout più le <li>opzioni fanno sì che il menu si sposti su due righe. Pertanto, ho dovuto regolare il padding-top per evitare che il menu coprisse il contenuto, quindi 110px.

Spero che questo ti aiuti...

— Harvey Mushman
fonte

6

So che questo thread è vecchio, ma ho appena avuto esattamente quel problema e l'ho risolto semplicemente usando la page-headerclasse nella mia pagina, sotto il menu di navigazione. Inoltre ho usato il <nav>tag invece di <div>ma non sono sicuro che presenterebbe un comportamento diverso.

Usando il page-headercome contenitore per la pagina, non dovrai fare confusione con il <body>, solo se non sei d'accordo con lo spazio predefinito che page-headerti dà.

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

Espandi frammento

— Zorkind
fonte

3

l'ho risolto usando jquery

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

Espandi frammento

— CruzDelSur
fonte