使bootstrap导航栏页脚停留在页面或屏幕的底部

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

所以基本上我想要以下行为：如果网站适合在屏幕上，页脚应该在屏幕的底部。如果不适合，页脚应该在内容的末尾。我怎样才能达到这样的行为？

来源

2015-02-23 Paul92

有*** 3 ***为'在引导navbar's类：'导航栏固定顶部“，”导航栏固定底部“和”导航栏静态顶部“。 Bootstrap没有正式支持'navbar-static-bottom'，这正是你要找的。另外，这个问题已经被单独问过几十次了，所以我相信你可以在那里找到适合你的东西。在发布重复问题之前尝试做更多的研究。 – 2015-02-23 20:58:28

既然你已经在使用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"); 
    } 
});

来源

2015-02-23 20:37:25

使bootstrap导航栏页脚停留在页面或屏幕的底部

回答

相关问题