Bootstrap 网格Padding超出页面的Bug Fix(一次痛苦的Debug经历)

技术博客 / Web   2015-06-28 16:28:42  阅读量: 4981
  Debug   Bootstrap   移动设备   响应式设计  

到昨天为止,这个网站的大框架已经建好,剩下一些细节美化的工作,其中遇到一个问题是在移动设备上查看网页时,虽然已经把相应的响应式容器设置为自适应视口大小,但浏览页面时总是会有横向滚动条出现,上下滚动时页面会左右滑动,如图所示:

 

右边总是多出一块,导致横向滚动条的出现,使得页面在横向不能固定,右边多出来15px,看上去不像一个原生应用,对于我这种写网页差不多逼成处女座的人来说,绝对不能忍!


于是查看相应的页面元素,看到页面容器的css是这么写的:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.row {

    margin-right: -15px;
    margin-left: -15px;

}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {

    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;

}

其中.container是用于响应式布局的容器,.row用于每一行的布局,.col-XX-*为每一列根据设备大小不同的栅格布局,它们的padding跟margin似乎跟出现的问题有关,于是查阅文档,发现有这么一段说明:

栅格与全宽布局Grids and full-width layouts

对于需要占据整个浏览器视口(viewport)的页面,需要将内容区域包裹在一个容器元素内,并且赋予padding: 0 15px;,为的是抵消掉为.row所设置的margin: 0 -15px;(如果不这样的话,你的页面会左右超出视口15px,页面底部出现横向滚动条)。

看样子问题就出现在这里,于是修改对应的css:

.container {
    padding: 0 15px;
}

因为每一个栅格都有对应的padding,于是将需要的栅格第一列的padding-left去掉,最后一列的padding-right去掉,似乎就能不仅占满整个页面,又能让横向滚动条不出现。

在浏览器测试了一下,果然那几个padding都没了,于是进行部署,在手机上查看网页,果然首页横向已经能固定不动了,似乎问题搞定了。但当查看博客详情页时,问题依旧~~

好吧,继续修改,首先还是从这几个padding入手,改了好多次,还是不行,感觉挺奇怪,用同样的方法,首页的搞定了,详情页还是搞不定。

最后实在不行,用排除法,一个元素一个元素的查看,最后排除发现,使用同样的布局,如果添加多说评论插件的话,问题就会重现,没用插件就没有问题。好吧,看来是因为有两个地方导致了同样的bug~~

好吧,又只能对插件内的元素一个一个排查。

最后排查发现,问题出在这:

社交账号登录这一行的宽度太宽,伸出去了,查看这个元素的css,是这么写的:

#ds-thread #ds-reset .ds-login-buttons .ds-social-links {
    float: left;
    width: 306px;
}

好吧~~在响应式布局里出现用px表示的宽度,又没注明overflow,不出问题才怪~~于是把这个元素的css修改一下:

#ds-thread #ds-reset .ds-login-buttons .ds-social-links {
    float: left;
    width:100%;
}

问题居然搞定了!!好吧,这两天为了这个bug,总计commit了19次,因为bug只在线上出现,在开发环境中根本不能重现!


最后,总结一下经验:

  1. 这此bug是有两种原因造成的,自己很早修好了第一种,却没想到会由于第二种原因造成相同的bug,所以才搞的这么纠结。

  2. 出bug环境跟开发测试环境要一致!之所以没在开发测试环境中找到这个原因,是因为在开发环境中我的评论框一直处于登录状态,出问题的div被隐藏,而在手机端未登录才出的bug,所以下次debug一定要保持两边环境完全一致!


不过,通过这个debug,也学会了用浏览器测试不同尺寸的设备,也学会了用MIHTool来远程测试iOS页面,也算学到了不少东西。