पिछले सभी समाधान हार्ड-कोड 40 पिक्सल विशेष रूप से एक फैशन या किसी अन्य में एचटीएमएल या सीएसएस में। क्या होगा अगर नावबार में एक अलग फ़ॉन्ट-आकार या एक छवि है? क्या होगा अगर मेरे पास पहली जगह में शरीर के गद्दी के साथ गड़बड़ न करने का एक अच्छा कारण है? मैं इस समस्या का हल खोज रहा हूँ, और यहाँ पर मैं आया हूँ:
$(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' समायोजित करके ऊपर या नीचे ले जा सकते हैं। यह मेरे लिए काम करने से पहले, आकार बदलने के बाद और नावबार में सामग्री के आकार की परवाह किए बिना काम करता है।
मैं उत्सुक हूं कि दूसरे इस बारे में क्या सोचते हैं: कृपया अपने विचार साझा करें। (इसे दोहराया नहीं जाएगा, btw के रूप में फिर से परिभाषित किया जाएगा।) jQuery का उपयोग करने के अलावा, क्या कोई अन्य कारण समस्या इस तरह से नहीं हैं? मैं भी इसे इस तरह से एक माध्यमिक नावबार के साथ काम कर रहा हूँ:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});
PS: ऊपर बूटस्ट्रैप 2.3.2 है - क्या यह 3.x में काम करेगा जब तक जेनेरिक क्लास के नाम रहेंगे ... वास्तव में, यह बूटस्ट्रैप से स्वतंत्र काम करना चाहिए, है ना?
संपादित करें: यहां एक पूर्ण jquery फ़ंक्शन है जो गतिशील आकार के दो स्टैक्ड, उत्तरदायी फिक्स्ड नेबर्स को संभालता है। इसके लिए 3 html वर्गों की आवश्यकता होती है (या आईडी का उपयोग कर सकते हैं): उपयोगकर्ता-शीर्ष, व्यवस्थापक-शीर्ष, और 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'
});
});