twitter bootstrap navbar fixiert oben überlappende Website

Question

Ich verwende Bootstrap auf meiner Website und habe Probleme mit der Navigationsleiste oben fixiert. Wenn ich nur die normale Navigationsleiste verwende, ist alles in Ordnung. Allerdings, wenn ich versuche, es zu navbar festen oben zu wechseln, alle anderen Inhalte auf der Website verschiebt sich wie die navbar ist nicht da und die navbar überlappt es. hier ist im Grunde, wie ich es ausgelegt:

.navbar.navbar-fixed-top
  .navbar-inner
    .container
.container
  .row
    //yield content

Ich habe versucht, Bootstraps Beispiele genau zu kopieren, aber immer noch mit diesem Problem nur bei Verwendung von navbar oben fixiert. was mache ich falsch?

Answer 1

Alle bisherigen Lösungen kodieren 40 Pixel auf die eine oder andere Weise fest in HTML oder CSS. Was ist, wenn die Navigationsleiste eine andere Schriftgröße oder ein Bild enthält? Was ist, wenn ich einen guten Grund habe, nicht an der Körper Polsterung in erster Linie? Ich habe nach einer Lösung für dieses Problem gesucht, und hier ist, was ich gefunden habe:

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

Sie können ihn nach oben oder unten verschieben, indem Sie die '1' einstellen. Bei mir scheint es unabhängig von der Größe des Inhalts in der Navigationsleiste zu funktionieren, vor und nach der Größenänderung.

Ich bin neugierig, was andere darüber denken: Bitte teilen Sie Ihre Gedanken mit. (Es wird überarbeitet werden, um nicht zu wiederholen, btw.) Neben der Verwendung von jQuery, gibt es irgendwelche anderen Gründe, das Problem nicht auf diese Weise zu nähern? Ich habe es sogar mit einer sekundären Navigationsleiste wie diese funktioniert:

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS: Oben ist auf Bootstrap 2.3.2 - wird es in 3.x funktionieren, solange die generischen Klassennamen bleiben... in der Tat, es sollte unabhängig von Bootstrap arbeiten, nicht wahr?

EDIT: Hier ist eine vollständige Jquery-Funktion, die zwei gestapelte, reaktionsfähige feste Navigationsleisten mit dynamischer Größe handhabt. Es erfordert 3 html-Klassen (oder könnte id's verwenden): user-top, admin-top, und contentwrap:

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});

Answer 2

Für die Behandlung von Umbruchlinien in der Menüleiste wenden Sie eine ID auf die Navigationsleiste an, etwa so:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

und fügen Sie dieses kleine Skript in den Kopf nach dem Einfügen der Jquery, wie folgt:

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

Auf diese Weise wird die obere Polsterung des Körpers automatisch angepasst.

Answer 3

Diese Klasse innerhalb des nav-Tags verwenden

class="navbar navbar-expand-lg navbar-light bg-light Klebeverschluss "

Für Bootstrap 4

Answer 4

Für Bootstrap 3.+ , würde ich folgende CSS verwenden, um navbar-fixed-top und die Anker springen überlappende Problem auf der Grundlage zu beheben https://github.com/twbs/bootstrap/issues/1768

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

Answer 5

Alles, was Sie tun müssen, ist

@media (min-width: 980px) { body { padding-top: 40px; } }