移动设备上的Bootstrap navbar-fixed-bottom和移动设备上的navbar-static-top？

Question

有没有办法让Bootstrap Navbar在移动设备上保持navbar-fixed-bottom，在桌面设备上保持navbar-static-top？我想创建两个导航栏并隐藏一个并显示另一个，尽管我不确定这是否正常;在相关的说明中，是否可以使用具有相同角色的两个导航元素？

Answer 1

您也可以通过根据屏幕宽度使用javascript jquery添加和删除导航栏的类来完成此操作。

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