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

Posted 2023-03-21

【中文标题】Bootstrap 3 固定页脚正在破坏我的移动网站

【英文标题】：Bootstrap 3 fixed footer is breaking my mobile site

【发布时间】：2017-12-09 22:43:27

【问题描述】：

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

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

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

【问题讨论】：

为此使用媒体查询

这是引用https://***.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile，对于手机和平板电脑，将position 属性fixed 更改为relative 的.navbar-fixed-bottom 类

Fixed footer in Bootstrap的可能重复

【参考方案1】：

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

@media (min-width:320px)   .navbar-fixed-bottomposition:relative !important; 
@media (min-width:480px)   .navbar-fixed-bottomposition:relative !important; 
@media (min-width:600px)   .navbar-fixed-bottomposition: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

    

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