Html 使用CSS以较小的屏幕分辨率删除div左右的空白

我在样式表中使用div.wide标记在页面顶部显示全屏图形

div.wide {
   height:500px;
   background-image: url(http://www.vidalingua.com/images/pont-des-invalides.jpg);
   background-position: 50%;
   background-size: cover;
   overflow:hidden;
}

当我将屏幕缩小到更小的宽度时，就像在手机上看到的那样，空白页边距开始出现。

---

如何解决以较小屏幕分辨率删除图像左右空白的问题？

这是因为在

bootstrap.css

的媒体查询

最大宽度：767px

@介质（最大宽度：767px）{
身体{
左侧填充：20px；
右边填充：20px；
}
}

因此，您需要在该查询中添加负数

边距
，如下所示：

@介质（最大宽度：767px）{
分区范围{
利润率：0-20px
}
}

如果您尝试在
正文
中重置
填充
，它将创建水平滚动条

@media (max-width: 767px){
body {
    padding-left: 20px;
    padding-right: 20px;
}
    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
    margin-left: -20px;
    margin-right: -20px;
    }
}

将此更改为

    @media (max-width: 767px){
    body {
        padding-left: 0px;
        padding-right: 0px;
        overflow:hidden;
    }
    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
    margin-left: 0px;
    margin-right: 0px;
    }
    }

如果您尝试在
正文
中重置
填充
，它将创建水平滚动条。我可以在网站中看到很多元素的负边距。这就是卷轴出现在正文中的原因。请更正负页边距，否则网站代码看起来会很混乱，并会导致压缩性问题。}我可以看到bootrap被编辑了。不编辑bootstrap.css是一个很好的做法。我稍微编辑了我的答案。请尝试一下，让我知道您仍然面临的问题。您能理解我的错误吗不是OP？我根本没问这个问题。你错了，引导程序没有被编辑，至少在partoo-yaa。。既然你热切地评论，我想是你。