Mam ten kod Bootstrap na Twitterze

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

Ale gdy przeglądam początek strony, pasek nawigacyjny blokuje niektóre treści znajdujące się w górnej części strony. Masz pomysł, jak przesunąć resztę zawartości w dół, gdy przeglądana jest góra strony, aby zawartość nie była blokowana przez pasek nawigacyjny?

Dodaj do swojego CSS:

body { 
    padding-top: 65px; 
}

Z dokumentów Bootstrap :

Naprawiony pasek nawigacyjny będzie nakładał inne treści, chyba że dodasz dopełnienie u góry ciała.

Dodanie takiego wypełnienia nie wystarczy, jeśli używasz responsywnego bootstrapu. W takim przypadku po zmianie rozmiaru okna pojawi się przerwa między górą strony a paskiem nawigacyjnym. Właściwe rozwiązanie wygląda następująco:

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

W przypadku bootstrap 3 klasa navbar-static-topzamiast navbar-fixed-topzapobiega temu problemowi, chyba że pasek nawigacyjny jest zawsze widoczny.

o wiele bardziej przydatne rozwiązanie w celach informacyjnych, działa idealnie we wszystkich moich projektach:

zmień swój pierwszy „div” z

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

do

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

Korzystam z jQuery, aby rozwiązać ten problem. To jest fragment kodu 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);        
});

Odniosłem duży sukces, tworząc fałszywy, niezmienny pasek nawigacyjny tuż przed moim prawdziwym stałym paskiem nawigacyjnym.

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

Odstępy sprawdzają się doskonale na wszystkich rozmiarach ekranu.

W moim projekcie pochodzącym z samouczka MVC 5 odkryłem, że zmiana wyściółki ciała nie miała żadnego wpływu. Dla mnie działało:

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

Rozwiązuje przypadki, w których pasek nawigacyjny składa się w 2 lub 3 linie. Można go wstawić do bootstrap.css w dowolnym miejscu po treści linii {margin: 0; }

Szablon startowy css bootstrap v4 używa:

body {
  padding-top: 5rem;
}

Jak widać na tym przykładzie z Twittera, dodaj to przed wierszem zawierającym deklaracje stylów responsywnych:

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

Tak jak:

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

z navbar domyślnie navbar wszystko działa dobrze, ale jeśli używasz navbar-fixed-top , musisz dołączyć niestandardowy styl body {padding-top: 60px;}, inaczej zablokuje zawartość pod spodem.

Staną się tutaj dwa problemy:

1. Ładowanie strony (treść ukryta)
2. Takie linki wewnętrzne zostaną przewinięte do góry i ukryte przez pasek nawigacyjny:

<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 z wewnętrznymi linkami do stron

Aby naprawić 1), jak powiedział powyżej Martijn Burger, szablon startowy css bootstrap v4 używa:

body {
  padding-top: 5rem;
}

Aby naprawić 2) sprawdź ten problem . Ten kod działa głównie (ale nie przy drugim kliknięciu tego samego skrótu):

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

Ten kod animuje linki A z jQuery (nie 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);
    });
  })

Najlepszym rozwiązaniem, jakie do tej pory znalazłem, które nie wymaga sztywnego kodowania wysokości i punktów przerwania, jest dodanie dodatkowego <nav...znacznika do znaczników.

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

Robiąc to w ten sposób, @mediapunkty przerwania są identyczne, wysokość jest identyczna (pod warunkiem, że twój navbar-brandjest najwyższym obiektem w, navbarale możesz łatwo zastąpić inny element w fixed-toppasku innym niż navbar.

Jeśli to się nie powiedzie, to czytniki ekranu, które będą teraz prezentować 2 navbar-brandelementy. Wskazuje to na potrzebę istnienia not-for-srklasy, która uniemożliwi wyświetlanie tego elementu w czytnikach ekranu. Jednak ta klasa nie istnieje https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Próbowałem naprawić problem z czytnikiem ekranu, aria-hidden="true"ale https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ wydaje się wskazywać, że to prawdopodobnie nie zadziała, gdy czytnik ekranu jest w trybie ustawiania ostrości, który jest oczywiście jedynym czasem, kiedy potrzebujesz go do pracy ...

używanie percentagejest znacznie lepszym rozwiązaniem niż pixels.

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

W razie potrzeby możesz nadal być wyraźny, dodając inny, breakpointsjak wspomniano w innej odpowiedzi autorstwa@spajus

EDYCJA: To rozwiązanie nie jest wykonalne w nowszych wersjach Bootstrap, w których klasy navbar-inverse i navbar-static-top nie są dostępne.

Za pomocą MVC 5, w sposób, w jaki naprawiłem mój, było po prostu dodanie własnego Site.css, załadowanego po innych, w następującym wierszu: body{padding: 0}

i zmieniłem kod na początku _Layout.cshtml, aby był:

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

Jeśli pasek nawigacyjny znajduje się początkowo na górze strony, ustaw wartość na 0. W przeciwnym razie ustaw wartość na data-offset-topwartość zawartości powyżej paska nawigacyjnego.

W międzyczasie musisz zmodyfikować css:

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

Dodaj:

.navbar {
  position: relative;
}

powinieneś dodać

#page {
  padding-top: 65px
}

aby nie zniszczyć lepkiej stopki lub czegoś innego

Dodaj do swojego JS:

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

margines można ustawić na podstawie rozdzielczości ekranu

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