Alle vorherigen Lösungen codieren 40 Pixel auf die eine oder andere Weise spezifisch in HTML oder CSS. Was ist, wenn die Navigationsleiste eine andere Schriftgröße oder ein anderes Bild enthält? Was ist, wenn ich einen guten Grund habe, mich überhaupt nicht mit der Körperpolsterung herumzuschlagen? Ich habe nach einer Lösung für dieses Problem gesucht, und hier ist, was ich mir ausgedacht 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 es nach oben oder unten bewegen, indem Sie die '1' einstellen. Es scheint für mich unabhängig von der Größe des Inhalts in der Navigationsleiste vor und nach der Größenänderung zu funktionieren.
Ich bin gespannt, was andere darüber denken: Bitte teilen Sie Ihre Gedanken mit. (Es wird übrigens überarbeitet, um nicht zu wiederholen.) Gibt es neben der Verwendung von jQuery noch andere Gründe, das Problem nicht auf diese Weise anzugehen? Ich habe es sogar mit einer sekundären Navigationsleiste wie dieser zum Laufen gebracht:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Oben ist Bootstrap 2.3.2 - funktioniert es in 3.x Solange die generischen Klassennamen erhalten bleiben ... sollte es tatsächlich unabhängig von Bootstrap funktionieren, oder?
BEARBEITEN: Hier ist eine vollständige Abfragefunktion, die zwei gestapelte, reaktionsschnelle feste Navigationsleisten mit dynamischer Größe verarbeitet. Es erfordert 3 HTML-Klassen (oder könnte IDs 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'
});
});