不同屏幕尺寸的固定导航栏

Question

有没有办法使用Bootstrap 3固定导航栏让它固定在md +的顶部，但固定在较小设备的底部？

目前这样做的是根据屏幕宽度隐藏和显示两个单独的导航。更希望有一个导航将根据屏幕大小粘贴，但无法弄清楚如何。

我是前端，不知道JavaScript，所以请在任何可能包含JS的说明中详细说明！

在此先感谢。

Answer 1

很简单，有点jQuery。

只需检查加载时浏览器的宽度，并且如果宽度等于或小于768像素，请将navbar-fixed-bottom添加到导航栏中。

的jQuery：

var width = $(window).width(), 
    height = $(window).height(); 
if ((width <= 768)) { 
    $('.navbar').addClass('navbar-fixed-bottom'); 
} 

可变宽度沾到负载窗口的宽度，然后if语句检查以看它是否等于或小于768点的像素。如果是这样，那么它会追加适当的类，否则就会使它独立。您需要触发此页面加载，所以它最终会看起来更像是这样的：

$(function() { 
var width = $(window).width(), 
     height = $(window).height(); 
    if ((width <= 768)) { 
     $('.navbar').addClass('navbar-fixed-bottom'); 
    } 
}); 

FIDDLE

简单地使结果窗格中的小提琴窄模拟花冤枉钱的设备/屏幕大小/窗口，然后点击运行看它从上到下翻转。

或者，即使用户调整窗口大小，也可以从顶部切换到底部。当用户旋转移动设备时可能会有用。

$(window).on('load resize', function() { 
    if($(window).width() <= 768) { 
     $('.navbar').addClass('navbar-fixed-bottom'); 
    } else { 
     $('.navbar').removeClass('navbar-fixed-bottom'); 
    } 
}); 

我为这一个做了JS Bin，因为JS是菲德尔怪异的行事与负载特性。调整输出窗口的大小，以查看我正在谈论的这一点代码。

Answer 2

如果你不想在这种情况下使用JavaScript，这里是我的解决方案。

既然你应该使用：

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

使固定到顶部或导航：

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 

使固定底部的导航，你可以简单地做这insted的那些二：

<nav class="navbar navbar-default navbar-position" role="navigation"> 

而且之后：

/* LESS */ 

@media (max-width: 767px) { 
    navbar-position { 
     .navbar-fixed-bottom; 
    } 
} 

@media (min-width: 768px) and (max-width: 991px) { 
    navbar-position { 
     .navbar-fixed-bottom; 
    } 
} 

@media (min-width: 992px) and (max-width: 1199px) { 
    navbar-position { 
     .navbar-fixed-top; 
    } 
} 

@media (min-width: 1200px) { 
    navbar-position { 
     .navbar-fixed-top; 
    } 
} 

所以，你看，insted的的navbar-fixed-top或navbar-fixed-bottom可以使用navbar-position女巫继承navbar-fixed-top或navbar-fixed-bottom类根据设备类型（XS，SM，MD，LG）