使用 CSS 以较小的屏幕分辨率删除 div 左侧和右侧的空格

Question

我在样式表中使用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;
}

当我将屏幕缩小到较小的宽度时，就像在手机上看到的那样，空白边距开始出现。http://vidalingua.com/blog/top-travel-blogs-for-france.php

如何解决在较小的屏幕分辨率下删除图像左侧和右侧的空白？

Answer 1

这是因为您在bootstrap.css的媒体查询max-width:767px中有此规则

@media (max-width: 767px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

因此，您需要在该查询中添加负margin，如下所示：

@media (max-width: 767px) {
  div.wide {
     margin: 0 -20px
  }
}

如果您尝试在body中重置padding它将创建水平滚动条。

Answer 2

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