Question

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

目前正在执行此操作，根据屏幕宽度隐藏和显示两个单独的导航。更愿意有一个导航将根据屏幕尺寸进行贴图，但无法弄清楚如何。

我是前端而且不懂JavaScript，所以请详细说明可能包含JS的说明！

提前致谢。

Answer 1

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

因为你应该使用：

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

使导航栏固定在顶部或：

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

要将导航固定到底部，您可以简单地执行以下两种操作：

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

因此，正如您所见，navbar-fixed-top或navbar-fixed-bottom，您可以使用navbar-position继承navbar-fixed-top或navbar-fixed-bottom类，具体取决于设备类型（xs ，sm，md，lg）

Answer 2

使用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

只需在小提琴中缩小结果窗格以模拟一个samller设备/屏幕尺寸/窗口，然后点击运行以查看它从上到下翻转。

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

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

我为这个做了一个 JS Bin ，因为JS Fiddle对加载功能表现得很奇怪。调整输出窗口的大小，看看我用这段代码谈论的内容。

修复了不同屏幕尺寸的导航栏

2 个答案: