Önceki tüm çözümler 40 pikseli özellikle html veya CSS'ye bir şekilde kodlar. Gezinme çubuğu farklı bir yazı tipi boyutu veya resim içeriyorsa ne olur? İlk etapta vücut dolgusu ile uğraşmamak için iyi bir nedenim varsa ne olur ? Bu soruna bir çözüm arıyordum ve işte burada bulduğum şey:
$(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'});
});
'1'i ayarlayarak yukarı veya aşağı hareket ettirebilirsiniz. Yeniden boyutlandırmadan önce ve sonra gezinme çubuğundaki içeriğin boyutundan bağımsız olarak benim için çalışıyor gibi görünüyor.
Başkalarının bu konuda ne düşündüğünü merak ediyorum: lütfen düşüncelerinizi paylaşın. (Tekrar etmeyecek şekilde yeniden düzenlenecektir, btw.) JQuery kullanmanın yanı sıra, soruna bu şekilde yaklaşmamak için başka nedenler var mı? Hatta böyle bir ikincil navbar ile çalıştım:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
Not: Yukarıdaki Bootstrap 2.3.2 üzerindedir - 3.x'te çalışır mı Genel sınıf isimleri kaldığı sürece ... aslında, bootstrap'tan bağımsız olarak çalışmalıdır, değil mi?
EDIT: İşte dinamik boyutta iki yığın, duyarlı sabit navbar işleyen tam bir jquery işlevi. 3 html sınıfı gerektirir (veya id'leri kullanabilir): user-top, admin-top ve 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'
});
});