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

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

在手机上，它固定在页面底部，覆盖其他内容

---

如何更改页脚，使页脚只固定在大屏幕/桌面屏幕上？

使用

媒体查询

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;} }

---

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

您可以阅读有关引导3断点的内容

小屏幕通常比

768px

小，因此如果不想在小屏幕上固定页脚。您可以使用媒体查询更改小屏幕中页脚的位置

/*适用于手机和平板电脑（两者）*/
@仅介质屏幕和（最小宽度：320px）和（最大宽度：767px）{
.导航条固定底部{
位置：静态！重要；
}
}
/*仅适用于移动电话*/
@仅介质屏幕和（最小宽度：320px）和（最大宽度：480px）{
.导航条固定底部{
位置：静态！重要；
}
}

或者，您可以看到针对同一问题的另一种解决方案

---

您可以通过浏览器查看网站的移动视图。

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

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

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

    }
}

---

填充物必须至少有页脚高度+一些像素才能好看。

使用媒体查询这是参考

https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

对于手机和平板电脑，将

位置

属性

固定

更改为

的
相对
。导航栏固定底部

类可能重复的