使用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
  }
}

如果您尝试在padding中重置body，则会创建水平滚动条。

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