Semua solusi sebelumnya hard-code 40 piksel khusus ke html atau CSS dalam satu atau lain cara. Bagaimana jika navbar berisi ukuran font atau gambar yang berbeda? Bagaimana jika saya punya alasan kuat untuk tidak mengacaukan bantalan tubuh ? Saya telah mencari solusi untuk masalah ini, dan inilah yang saya temukan:
$(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'});
});
Anda dapat memindahkannya ke atas atau ke bawah dengan menyesuaikan '1'. Tampaknya bekerja untuk saya terlepas dari ukuran konten di navbar, sebelum dan sesudah mengubah ukuran.
Saya ingin tahu apa yang orang lain pikirkan tentang ini: tolong bagikan pemikiran Anda. (Ini akan di refactored agar tidak diulang, btw.) Selain menggunakan jQuery, adakah alasan lain untuk tidak mendekati masalah dengan cara ini? Saya bahkan sudah membuatnya bekerja dengan navbar sekunder seperti ini:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: Di atas ada di Bootstrap 2.3.2 - apakah akan bekerja di 3.x Selama nama kelas generik tetap ... pada kenyataannya, itu harus bekerja independen dari bootstrap, kan?
EDIT: Ini adalah fungsi jquery lengkap yang menangani dua navar tetap yang responsif dengan ukuran dinamis. Ini membutuhkan 3 kelas html (atau bisa menggunakan id): user-top, admin-top, dan 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'
});
});