Bootstrap 3固定页脚打破了我的移动网站

Question

我在网页上使用固定页脚。

在移动设备上，它固定在页面底部并覆盖其他内容。

如何更改它以便仅在大型/桌面屏幕上固定页脚？

Answer 1

使用media query css作为解决方案。

@media (min-width:320px)  { .navbar-fixed-bottom{position:relative !important;} }
@media (min-width:480px)  { .navbar-fixed-bottom{position:relative !important;} }
@media (min-width:600px)  { .navbar-fixed-bottom{position:relative !important;} }

希望这个答案对你有所帮助。

Answer 2

您可以阅读有关bootstrap 3断点here

的信息

对于小屏幕，断点小于768px，因此如果您不希望页脚固定在小屏幕上，您可以制作此代码.....

/*for mobile phones and tablets (both)*/

@media only screen and (min-width: 320px) and (max-width: 767px) {
  .navbar-fixed-bottom {
    position: static !important;
  }
}

/* for mobile phones only*/

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .navbar-fixed-bottom {
    position: static !important;
  }
}

或者你可以看到另外一个解决方案here。

虽然如果您想在不同的屏幕上测试您的网站，您可以通过在任何浏览器的开发者工具中切换设备来检查您的网站。

Answer 3

或者第二个解决方案是在手机上添加容器填充：

@media only screen and (min-width: 320px) and (max-width: 991px) {
    .my_container{

      padding-bottom: 100px !important; //example

    }
}

填充必须至少有页脚高度+一些px才能看起来很好看。