Tutte le precedenti soluzioni codificano 40 pixel in modo specifico nell'html o CSS in un modo o nell'altro. Cosa succede se la barra di navigazione contiene una dimensione del carattere o un'immagine diversa? Cosa succede se ho una buona ragione per non pasticciare con l' imbottitura del corpo in primo luogo? Ho cercato una soluzione a questo problema, ed ecco cosa mi è venuto in mente:
$(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'});
});
Puoi spostarlo verso l'alto o verso il basso regolando '1'. Sembra funzionare per me indipendentemente dalle dimensioni del contenuto nella barra di navigazione, prima e dopo il ridimensionamento.
Sono curioso di sapere cosa ne pensano gli altri: per favore, condividi i tuoi pensieri. (Sarà refactored per non ripetere, tra l'altro.) Oltre ad usare jQuery, ci sono altri motivi per non affrontare il problema in questo modo? Ho persino funzionato con una barra di navigazione secondaria come questa:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: sopra è su Bootstrap 2.3.2 - funzionerà in 3.x Fintanto che i nomi di classe generici rimangono ... in effetti, dovrebbe funzionare indipendentemente da bootstrap, giusto?
EDIT: Ecco una funzione jquery completa che gestisce due navbar fissi impilati, responsive di dimensioni dinamiche. Richiede 3 classi html (o potrebbe usare l'id): user-top, admin-top e 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'
});
});