Ich habe diesen Twitter Bootstrap Code

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

Wenn ich jedoch den Anfang der Seite ansehe, blockiert die Navigationsleiste einen Teil des Inhalts, der sich oben auf der Seite befindet. Haben Sie eine Idee, wie Sie den Rest des Inhalts nach unten drücken können, wenn der obere Rand der Seite angezeigt wird, damit der Inhalt nicht von der Navigationsleiste blockiert wird?

Fügen Sie Ihrem CSS hinzu:

body { 
    padding-top: 65px; 
}

Aus den Bootstrap-Dokumenten :

Die feste Navigationsleiste überlagert Ihren anderen Inhalt, es sei denn, Sie fügen oben am Körper Polster hinzu.

Das Hinzufügen eines solchen Auffüllens reicht nicht aus, wenn Sie einen reaktionsschnellen Bootstrap verwenden. In diesem Fall wird beim Ändern der Fenstergröße eine Lücke zwischen dem Seitenanfang und der Navigationsleiste angezeigt. Eine richtige Lösung sieht so aus:

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

Bei Bootstrap 3 verhindert die Klasse dieses Problem, navbar-static-topanstatt navbar-fixed-top, dass die Navigationsleiste immer sichtbar sein muss.

Eine viel praktischere Lösung für Ihre Referenz, die in allen meinen Projekten perfekt funktioniert:

ändere dein erstes 'div' von

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

zu

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

Ich benutze jQuery, um dieses Problem zu lösen. Dies ist das Snippet für 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);        
});

Ich habe gute Erfolge mit der Erstellung einer nicht fixierten Dummy-Navigationsleiste direkt vor meiner echten festen Navigationsleiste erzielt.

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

Der Abstand funktioniert bei allen Bildschirmgrößen hervorragend.

In meinem aus dem MVC 5-Tutorial abgeleiteten Projekt stellte ich fest, dass das Ändern der Körperpolsterung keine Auswirkungen hatte. Folgendes hat bei mir funktioniert:

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

Es löst die Fälle, in denen die Navigationsleiste in 2 oder 3 Zeilen gefaltet wird. Dies kann an einer beliebigen Stelle nach dem Zeilenkörper in bootstrap.css eingefügt werden {margin: 0; }}

Die Bootstrap v4- Startervorlage CSS verwendet:

body {
  padding-top: 5rem;
}

Fügen Sie dies, wie in diesem Beispiel von Twitter zu sehen, vor der Zeile hinzu, die die Deklarationen der Antwortstile enthält:

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

Wie so:

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

Mit navbar navbar-default funktioniert alles einwandfrei. Wenn Sie jedoch navbar-fixed-top verwenden , müssen Sie einen benutzerdefinierten Stil body {padding-top: 60px;} einfügen, da sonst der Inhalt darunter blockiert wird.

Hier treten zwei Probleme auf:

1. Seitenladen (Inhalt ausgeblendet)
2. Interne Links wie dieser werden nach oben gescrollt und von der Navigationsleiste ausgeblendet:

<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 mit internen Seitenlinks

Um 1) zu beheben, verwendet die Bootstrap v4-Startervorlage CSS, wie Martijn Burger oben sagte:

body {
  padding-top: 5rem;
}

Um dies zu beheben 2) Überprüfen Sie dieses Problem . Dieser Code funktioniert meistens (aber nicht beim zweiten Klick auf denselben Hash):

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

Dieser Code animiert A-Links mit jQuery (nicht schlankes 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);
    });
  })

Die beste Lösung, die ich bisher gefunden habe und die keine harten Codierungshöhen und Haltepunkte beinhaltet, besteht darin <nav..., dem Markup ein zusätzliches Tag hinzuzufügen .

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

Auf diese Weise sind die @mediaHaltepunkte identisch, die Höhe ist identisch (vorausgesetzt, Sie navbar-brandsind das höchste Objekt in der, navbaraber Sie können problemlos ein anderes Element in der Nicht- fixed-topNavigationsleiste ersetzen.

Dies schlägt bei Bildschirmleseprogrammen fehl, die nun 2 navbar-brandElemente präsentieren. Dies weist auf die Notwendigkeit einer not-for-srKlasse hin, um zu verhindern, dass dieses Element für Bildschirmleser angezeigt wird. Diese Klasse existiert jedoch nicht https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Ich habe versucht, das Problem mit dem Bildschirmleser zu kompensieren, aria-hidden="true"aber https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ scheint darauf hinzudeuten, dass dies wahrscheinlich nicht funktioniert, wenn der Bildschirmleser aktiviert ist im Fokusmodus, der natürlich das einzige Mal ist, dass Sie ihn tatsächlich zum Arbeiten benötigen ...

mit percentage ist eine viel bessere Lösung als pixels.

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

Bei Bedarf können Sie immer noch explizit sein, indem Sie verschiedene hinzufügen, breakpointswie in einer anderen Antwort von erwähnt@spajus

BEARBEITEN: Diese Lösung ist für neuere Versionen von Bootstrap nicht geeignet, bei denen die Klassen navbar-inverse und navbar-static-top nicht verfügbar sind.

Mit MVC 5 habe ich meine behoben, indem ich einfach meine eigene Site.css hinzugefügt habe, die nach den anderen geladen wurde, mit der folgenden Zeile: body{padding: 0}

und ich habe den Code am Anfang von _Layout.cshtml so geändert, dass er lautet:

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

Wenn sich Ihre Navigationsleiste ursprünglich oben auf der Seite befindet, setzen Sie den Wert auf 0. Andernfalls legen Sie den Wert für fest data-offset-top auf den Wert des Inhalts über Ihrer Navigationsleiste.

In der Zwischenzeit müssen Sie Folgendes ändern css:

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

Füge das hinzu:

.navbar {
  position: relative;
}

Sie sollten hinzufügen

#page {
  padding-top: 65px
}

eine klebrige Fußzeile oder etwas anderes nicht zerstören

Fügen Sie Ihrem JS hinzu:

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

Sie können den Rand basierend auf der Bildschirmauflösung einstellen

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