Question

我的网页有一个导航栏页脚。我知道有两种可能的选项：navbar-fixed-bottom和navbar-bottom。问题是我希望我的网站在不同的分辨率上看起来很好。在我的整个网站都很合适的高分辨率下，navbar-fixed-bottom非常理想。如果我使用navbar-bottom，页脚将停留在内容的底部，而不是屏幕底部。在低分辨率下，这需要滚动，navbar-bottom是完美的，因为我不想每次都看到导航栏。

所以基本上我想要以下行为：如果网站适合屏幕，则页脚应位于屏幕的底部。如果它不合适，则页脚应位于内容的末尾。我怎样才能实现这种行为？

Answer 1

由于您已经在使用Bootstrap，我假设您还使用了jQuery。并且，由于这些类的CSS很难复制，这是在jQuery中实现它的一种方法：

$(document).ready(function () {
    if ($(window).width > idealSiteWidth) {
        $(".navbar").removeClass("navbar-fixed-bottom");
        $(".navbar").addClass("navbar-bottom");
    } else {
        $(".navbar").addClass("navbar-fixed-bottom");
        $(".navbar").removeClass("navbar-bottom");
    }
});

使引导程序导航栏脚留在页面或屏幕的底部

1 个答案: