Bootstrap - fixed-bottom na pulpicie i navbar-static-top na urządzeniach mobilnych?

Question

Czy istnieje sposób na utrzymywanie paska nawigacyjnego Bootstrap jako navbar-fixed-bottom, gdy jest on na urządzeniu mobilnym, a na pulpicie navbar-static-top? Zastanawiałem się nad utworzeniem dwóch navbarów i ukrywaniem jednego i pokazaniem drugiego, choć nie jestem pewien, czy to w porządku; na pokrewną uwagę, czy można używać dwóch elementów nav z tą samą rolą?

Answer 1

Można to również zrobić, dodając i usuwając klasę paska nawigacyjnego za pomocą jQuery Javy według szerokości ekranu.

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

Będzie działać na pewno

Answer 2

Można użyć zapytań o media:

<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

Ten kod działa dla mnie, i powinny być łatwe do zrozumienia.

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(); 
});