부트 스트랩 navbar-fixed-bottom 데스크탑과 navbar-static-top on mobile?

Question

모바일에있을 때 부트 스트랩 탐색 모음을 navbar-fixed-bottom으로 유지하는 방법이 있습니까? 데스크톱에있을 때 navbar-static-top 일 때 부트 스트랩 탐색 모음을 유지하는 방법이 있습니까? 괜찮은지 확실하지 않지만 두 개의 navb를 만들고 숨기고 다른 하나를 보여주는 것을 생각하고있었습니다. 관련 메모에서 같은 역할을 가진 두 개의 nav 요소를 사용하는 것이 괜찮습니까?

Answer 1

화면 너비에 따라 javascript 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(); 
});