Question

我正在研究这个site，并尝试让网站具有移动响应能力。但是当我在响应模式下尝试时，我会在屏幕右侧看到一个空白区域。我不会＆＃39知道它来自哪里。任何人都可以看看并帮助我。我已经尝试将其添加到CSS中

body{
width :100%;
}

但没有办法帮助他们。这是我的site请帮忙!!谢谢！

Answer 1

相应地添加/编辑您的CSS

footer .container {
max-width: 960px;
}

.logo {
background: url(../img/layout/logo1.png) no-repeat;
height: 58px;
max-width: 531px;
display: block;
margin: 45px 10px;
cursor: pointer;
background-size: 100%;
}

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

Answer 2

这是CSS的这一部分：

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

将左右填充更改为0.虽然我在bootstrap-responsive CSS文件中这样做，但我要避免编辑该文件并创建规则以在您自己的CSS文件中覆盖它。

Answer 3

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

此代码（可能）位于 bootstrap-responsive.css 文件的第784行，并在该屏幕大小上添加了填充。

在你的main.css中添加：

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

白色空间将消失。您也可以删除 bootstrap-responsive.css 中的行，但我更喜欢在您自己的文件中进行更改，并允许未经编辑的插件文件。

希望这有帮助！

让我的网站响应

3 个答案: