डेस्कटॉप पर बूटस्ट्रैप navbar- निश्चित-तल और मोबाइल पर navbar-static-top?

Question

क्या बूटस्ट्रैप नवाबार को मोबाइल पर होने पर navbar-fixed-bottom और डेस्कटॉप पर navbar-static-top होने का कोई तरीका है? मैं दो नौसेना बनाने और एक छिपाने और दूसरे को दिखाने की सोच रहा था, हालांकि मुझे यकीन नहीं है कि यह ठीक है; एक संबंधित नोट पर, क्या एक ही भूमिका के साथ दो एनवी तत्वों का उपयोग करना ठीक है?

Answer 1

आप स्क्रीन चौड़ाई के अनुसार जावास्क्रिप्ट jquery का उपयोग कर navbar के वर्ग को जोड़कर और हटाकर भी ऐसा कर सकते हैं।

if ($(window).width() > 330) { 
$('.navbar').addClass('navbar-static-top'); 
} 
else 
{ 
$('.navbar').addClass('navbar-fixed-bottom'); 
} 

यह के लिए यकीन है कि

Answer 2

काम करेंगे आप मीडिया प्रश्नों का उपयोग कर सकते हैं:

<nav class="navbar navbar-default navbar-static-top" role="navigation"> 

@media (max-width:767px) { .navbar-static-top { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; } } 

Answer 3

इस कोड मेरे लिए काम करता है, और समझने के लिए आसान होना चाहिए।

var win = $(this);  // browser window 
var nav = $('.navbar'); // your navigation bar 

function switchNavbar() { 
    if (win.width() < 768) { // on mobile 
     nav.removeClass('navbar-static-top'); 
     nav.addClass('navbar-fixed-bottom'); 
    } else { // on desktop 
     nav.removeClass('navbar-fixed-bottom'); 
     nav.addClass('navbar-static-top'); 
    } 
} 

// On first load 
$(function() { 
    switchNavbar(); 
}); 

// When browser resized 
$(window).on('resize', function(){ 
    switchNavbar(); 
});