Ho questo codice Bootstrap di 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>

Ma quando sto visualizzando l'inizio della pagina, la barra di navigazione sta bloccando parte del contenuto che si trova nella parte superiore della pagina. Qualche idea su come farlo abbassare il resto del contenuto in basso quando viene visualizzata la parte superiore della pagina in modo che il contenuto non sia bloccato dalla barra di navigazione?

Aggiungi al tuo CSS:

body { 
    padding-top: 65px; 
}

Dai documenti Bootstrap :

La barra di navigazione fissa si sovrapporrà agli altri tuoi contenuti, a meno che tu non aggiunga imbottitura nella parte superiore del corpo.

L'aggiunta di un padding del genere non è sufficiente se si utilizza un bootstrap reattivo. In questo caso, quando ridimensionate la finestra, otterrete uno spazio tra la parte superiore della pagina e la barra di navigazione. Una soluzione adeguata si presenta così:

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

Per bootstrap 3, la classe navbar-static-topanziché navbar-fixed-toppreviene questo problema, a meno che non sia necessario che la barra di navigazione sia sempre visibile.

una soluzione molto più utile per il tuo riferimento, funziona perfettamente in tutti i miei progetti:

cambia il tuo primo 'div' da

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

per

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

Sto usando jQuery per risolvere questo problema. Questo è lo snippet per 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);        
});

Ho avuto un buon successo con la creazione di una barra di navigazione fittizia non fissa proprio prima della mia vera barra di navigazione fissa.

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

La spaziatura funziona alla grande su tutte le dimensioni dello schermo.

Nel mio progetto derivato dal tutorial di MVC 5 ho scoperto che cambiare l'imbottitura del corpo non ha avuto alcun effetto. Per me ha funzionato:

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

Risolve i casi in cui la barra di navigazione si piega in 2 o 3 linee. Questo può essere inserito in bootstrap.css ovunque dopo il corpo delle linee {margin: 0; }

Il modello di avvio bootstrap v4 css utilizza:

body {
  padding-top: 5rem;
}

Come visto in questo esempio da Twitter, aggiungilo prima della riga che include le dichiarazioni di stili reattivi:

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

Così:

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

con navbar navbar-default tutto funziona bene, ma se stai usando navbar-fixed-top devi includere un body in stile personalizzato {padding-top: 60px;} altrimenti bloccherà il contenuto sottostante.

Qui accadranno due problemi:

1. Caricamento della pagina (contenuto nascosto)
2. I collegamenti interni come questo scorreranno verso l'alto e saranno nascosti dalla barra di navigazione:

<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 con collegamenti alla pagina interna

Per risolvere 1), come detto sopra Martijn Burger, il modello di avvio bootstrap v4 css utilizza:

body {
  padding-top: 5rem;
}

Per risolvere 2) controlla questo problema . Questo codice funziona principalmente (ma non al secondo clic dello stesso hash):

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

Questo codice anima i collegamenti A con jQuery (non slim jQuery):

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

La migliore soluzione che ho trovato finora, che non prevede altezze e punti di interruzione della codifica è quella di aggiungere un <nav...tag aggiuntivo al markup.

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

In questo modo i @mediapunti di interruzione sono identici, l'altezza è identica (a condizione che il tuo navbar-brandsia l'oggetto più alto nel navbarma puoi facilmente sostituire un altro elemento nella fixed-topbarra di navigazione.

Dove questo fallisce è con gli screen reader che ora presenteranno 2 navbar-brandelementi. Ciò indica la necessità di una not-for-srclasse per impedire che quell'elemento venga visualizzato per gli screen reader. Tuttavia quella classe non esiste https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Ho provato a compensare il problema dello screen reader con aria-hidden="true"ma https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ sembra indicare che probabilmente non funzionerà quando lo screen reader è in modalità di messa a fuoco, che ovviamente è l'unica volta che ne hai davvero bisogno per funzionare ...

usare percentageè una soluzione molto migliore di pixels.

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

Se necessario, puoi comunque essere esplicito aggiungendo diversi breakpointscome indicato in un'altra risposta di@spajus

EDIT: questa soluzione non è praticabile per le versioni più recenti di Bootstrap, dove le classi navbar-inverse e navbar-static-top non sono disponibili.

Utilizzando MVC 5, il modo in cui ho risolto il mio, è stato semplicemente aggiungere il mio Site.css, caricato dopo gli altri, con la seguente riga: body{padding: 0}

e ho cambiato il codice all'inizio di _Layout.cshtml, per essere:

<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 la barra di navigazione si trova originariamente nella parte superiore della pagina, imposta il valore su 0. In caso contrario, imposta il valore per data-offset-topil valore sopra il contenuto della barra di navigazione.

Nel frattempo, è necessario modificare csscome tale:

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

Aggiungi questo:

.navbar {
  position: relative;
}

dovresti aggiungere

#page {
  padding-top: 65px
}

per non distruggere un piè di pagina appiccicoso o qualcos'altro

Aggiungi al tuo JS:

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

puoi impostare il margine in base alla risoluzione dello schermo

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