Bootstrap 3 固定页脚正在破坏我的移动网站答案

【问题标题】：Bootstrap 3 fixed footer is breaking my mobile siteBootstrap 3 固定页脚正在破坏我的移动网站
【发布时间】：2017-12-09 22:43:27
【问题描述】：

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

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

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

【问题讨论】：

为此使用媒体查询
这是引用https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile，对于手机和平板电脑，将position 属性fixed 更改为relative 的.navbar-fixed-bottom 类
Fixed footer in Bootstrap的可能重复

标签： css twitter-bootstrap-3 responsive

【解决方案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;} }

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

【讨论】：

【解决方案2】：

您可以阅读有关引导程序 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。

您可以通过开发者工具浏览器查看网站的移动视图。

【讨论】：

【解决方案3】：

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

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

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

    }
}

为了好看，内边距必须至少有页脚高度 + 一些像素。

【讨论】：