最近的一个项目 前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽)。一直在Chrome的仿真机测试非常完美, 没有进行真机测试。完成后,到手机测试时傻了,左右滑动页面时,竟然出现了一个 空白的竖条(如下图所示)。判断是margin-right 设置的长度所致,检查css,并没有相关代码。看来问题出现在了 bootstrap 。虽然不影响 程序的使用,但是感觉非常别扭,一定要修复它。
检查页面,发现用栅格系统的页面才会出现此问题。检查.row相关的css,发现它的margin定义如下:
.row{ margin-left:-15px; margin-right:-15px; }
.row 一般作为 container的下级元素、作为 .col-xx-xx的上级元素。顺便查看下 .container 和 con-xx-xx的css:
.container{ padding-left:15px; padding-right:15px; } .col-xx-xx{ padding-left:15px; padding-right:15px; }
.container 的所有元素 内边距 都有 15px 的距离,显得非常美观,.col-xx-xx 也设置了内边距 15px。这样就无法和 .contariner 的元素对齐了(.col-xx-xx相对于 .container的距离为30px),所以第一个栅格元素元素和最后一个栅格元素 需要分别设置为 {padding-left:0px;} 、{padding-right:0px;}。这样解决了对齐的问题,但是设置之后,虽然每个栅格的宽度一致,显示的内容的宽度又有了 15px 的差距。于是 FB 的天才们巧妙的 采用了 负数的外边框的 解决方案,不仅代码实现简单,还没有 每个 栅格 显示的内容的宽度不一致的问题。
虽然 负数的外边框 这种解决方案好,但是在小屏幕(移动端)会产生空白边框的问题(本文要解决的痛点)。定制bootstrap解决这个问题,但是太麻烦,最简单的方法就是复写相关的css。
/* 需要在 bootstrap.css 之后调用 */ /* Fuck 15px for iPhone Start */ .row{margin:0;} .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{padding:0;} /* Fuck 15px for iPhone Over */
成功解决,因为 栅格 没有了 padding,每个栅栏的 宽度一致,显示的内容的宽度也一致,和 contrainer 的元素也能对齐(注意:这个后果也很严重,就是每个栅格之间的内容都连在一起了,在内部的栅格重新定义内边距和内容居中即可解决)。
以上所述是小编给大家介绍的BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法,希望对大家有所帮助!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]