在移动设备的右侧获得空白.表格和文本的某些部分超出移动宽度

Question

移动设备右侧出现奇怪的空白。我试着用下面的方式在正文中包装页面:

<div style="overflow-x:hidden"></div>

它移除了右边的空白，但它也删除了之前溢出的内容。所以，我把它去掉了。我尝试了很多方法，但到目前为止还没有成功。我使用viewport meta标签，并使用bootstrap 3用于RWD。有人能帮帮忙吗，有什么问题吗?提前谢谢。

链接如下:[http://107.180.106.101:8081/rates-go.html]

Answer 1

在您的样式表@ http://107.180.106.101:8081/Content/css/style.css中，第460行有

#page-content{
    width: 572px;
   ...
}

硬编码的宽度将导致窄视口的问题。一种选择是将其更改为

之类的内容

#page-content{
     width: 572px;
     max-width: 100%
     ...
}  

希望这对你有帮助!

调整移动菜单的一种方法是在CSS中添加如下内容:

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