Toutes les solutions précédentes du code en dur de 40 pixels spécifiquement dans le code html ou CSS d'une façon ou d'une autre. Que faire si la barre de navigation contient une autre taille de police ou une image? Que faire si j'ai une bonne raison de ne pas se salir avec le corps de rembourrage en premier lieu? J'ai été la recherche d'une solution à ce problème, et voici ce que j'ai trouvé:
$(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'});
});
Vous pouvez déplacer vers le haut ou vers le bas par l'ajustement de la '1'. Il semble fonctionner pour moi, quelle que soit la taille du contenu dans la barre de navigation, avant et après le redimensionnement.
Je suis curieux de savoir ce que les autres pensent à ce sujet: s'il vous plaît partagez vos pensées. (Il sera reconstruit à ne pas répéter, btw.) Outre l'utilisation de jQuery, il y a d'autres raisons de ne pas aborder le problème de cette façon? J'ai même de travailler avec une barre de navigation secondaire comme ceci:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: ci-Dessus est sur Bootstrap 2.3.2 - il travaillera en 3.x aussi longtemps Que la classe générique les noms restent... en fait, il devrait travailler de manière indépendante et de bootstrap, droit?
EDIT: Voici une complète fonction jquery qui gère les deux empilés, réactive fixe navbars de la dynamique de la taille. Il nécessite 3 classes html(ou pourrait utiliser id): utilisateur, administrateur-haut, et 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'
});
});
