BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
作者：苗启源
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
最近的一个项目 前台使用了 bootstrap.css + angularjs， 后台只处理数据（用的php，处理结果直接 json_encode($arr)，非常爽）。一直在Chrome的仿真机测试非常完美， 没有进行真机测试。完成后，到手机测试时傻了，左右滑动页面时，竟然出现了一个 空白的竖条（如下图所示）。判断是margin-right 设置的长度所致，检查css，并没有相关代码。看来问题出现在了 bootstrap 。虽然不影响 程序的使用，但是感觉非常别扭，一定要修复它。
检查页面，发现用栅格系统的页面才会出现此问题。检查.row相关的css，发现它的margin定义如下：
margin-left:-15
margin-right:-15
.row 一般作为 container的下级元素、作为 .col-xx-xx的上级元素。顺便查看下 .container 和 con-xx-xx的css：
.container{
padding-left:15
padding-right:15
.col-xx-xx{
padding-left:15
padding-right:15
.container 的所有元素 内边距 都有 15px 的距离，显得非常美观，.col-xx-xx 也设置了内边距 15px。这样就无法和 .contariner 的元素对齐了（.col-xx-xx相对于 .container的距离为30px），所以第一个栅格元素元素和最后一个栅格元素 需要分别设置为 {padding-left:0} 、{padding-right:0}。这样解决了对齐的问题，但是设置之后，虽然每个栅格的宽度一致，显示的内容的宽度又有了 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 在手机端滑动时右侧出现空白的原因及解决办法，希望对大家有所帮助！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具扫描下载MIUI论坛APP
经验653 米
在线时间77 小时
版本6.1.28
积分 763, 距离下一级还需 1237 积分
积分 763, 距离下一级还需 1237 积分
机型小米手机3/4 WCDMA版
签到次数29
MIUI版本6.1.28
刷完3.9球秋大的最新5.02，为什么wifi和信号旁边有个感叹号啊》
还有打开菜单也就是所有app的抽屉的时候动画怎么感觉有点掉帧呢？
分享到微信朋友圈
打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。
经验1847 米
在线时间323 小时
版本5.9.24
MIUI7.1 Alpha Insider
积分 2235, 距离下一级还需 2765 积分
积分 2235, 距离下一级还需 2765 积分
机型小米手机4
签到次数45
MIUI版本5.9.24
通过手机发布
出现感叹号是因为检测到不正常网络，而这个检测是在Google服务器进行的，Google在国内的连通性你懂的。想解决这个问题也很简单，可以参照少数派文章「一键去掉lollipop感叹号」/t/2913
已有&1&人评分
助人为乐^_^
经验2324 米
在线时间318 小时
版本6.9.15
积分 3130, 距离下一级还需 1870 积分
积分 3130, 距离下一级还需 1870 积分
机型小米手机3/4 WCDMA国际版
签到次数75
MIUI版本6.9.15
通过手机发布
移动4g版信号没有感叹号WiFi有，没有卡顿
经验1391 米
在线时间47 小时
版本6.8.11
积分 1736, 距离下一级还需 264 积分
积分 1736, 距离下一级还需 264 积分
机型小米Max 标准版
签到次数46
MIUI版本6.8.11
经验653 米
在线时间77 小时
版本6.1.28
积分 763, 距离下一级还需 1237 积分
积分 763, 距离下一级还需 1237 积分
机型小米手机3/4 WCDMA版
签到次数29
MIUI版本6.1.28
通过手机发布
爱爱不坏 发表于
移动4g版信号没有感叹号WiFi有，没有卡顿
不是卡顿，是掉帧
经验713 米
在线时间18 小时
版本6.8.18
积分 755, 距离下一级还需 1245 积分
积分 755, 距离下一级还需 1245 积分
机型小米手机3/4 WCDMA版
签到次数47
MIUI版本6.8.18
同是叹号问题，一开始浏览器还用不了呢我。强行停止一次才能用
经验653 米
在线时间77 小时
版本6.1.28
积分 763, 距离下一级还需 1237 积分
积分 763, 距离下一级还需 1237 积分
机型小米手机3/4 WCDMA版
签到次数29
MIUI版本6.1.28
通过手机发布
morjac 发表于
出现感叹号是因为检测到不正常网络，而这个检测是在Google服务器进行的，Google在国内的连通性你懂的。想解 ...
谢谢哈，已解决！
已关注微信
已关注极客秀微信
关注腾讯微博
已关注腾讯微博
关注新浪微博
已关注新浪微博
Copyright (C) 2016 MIUI
京ICP备号 | 京公网安备34号 | 京ICP证110507号you have been blocked后使用快捷导航没有帐号？
只需一步，快速开始
查看: 2770|回复: 10
在线时间316 小时经验值925 最后登录注册时间帖子阅读权限70UID
学士, 积分 925, 距离下一级还需 175 积分
该用户从未签到
G币212 最后登录注册时间
马上注册，结交更多机友，下载更多应用，让你轻松玩转手机。
已有帐号？　　　下载游戏和软件，请【】进入机锋市场！
如题，我曾经刷机遇到这种情况，但是还是刷得进去，想知道什么来的？？？
在线时间544 小时经验值1073 最后登录注册时间帖子阅读权限70UID5965907
学士, 积分 1073, 距离下一级还需 27 积分
该用户从未签到
G币504 最后登录注册时间
感谢分享！
在线时间163 小时经验值518 最后登录注册时间帖子阅读权限60UID51988
大学本科, 积分 518, 距离下一级还需 182 积分
TA的每日心情郁闷 10:00签到天数: 2 天[LV.1]初来乍到
G币150 最后登录注册时间
&&就是软件更新不成功，重新刷！
在线时间952 小时经验值4732 最后登录注册时间帖子阅读权限120UID5051652
导师, 积分 4732, 距离下一级还需 1368 积分
该用户从未签到
G币12334 最后登录注册时间
刷机完成前，拔掉数据线你就得到了。
在线时间316 小时经验值925 最后登录注册时间帖子阅读权限70UID
学士, 积分 925, 距离下一级还需 175 积分
该用户从未签到
G币212 最后登录注册时间
cenyuan1128
& & 学习了，谢谢！！
在线时间316 小时经验值925 最后登录注册时间帖子阅读权限70UID
学士, 积分 925, 距离下一级还需 175 积分
该用户从未签到
G币212 最后登录注册时间
chenjianyu1987
& &&&学习了，谢谢！！
在线时间629 小时经验值2656 最后登录注册时间帖子阅读权限100UID3798610
博士, 积分 2656, 距离下一级还需 844 积分
TA的每日心情奋斗 14:25签到天数: 333 天[LV.8]以坛为家I
G币5040 最后登录注册时间
半砖标志。
在线时间469 小时经验值541 最后登录注册时间帖子阅读权限60UID4925160
大学本科, 积分 541, 距离下一级还需 159 积分
TA的每日心情衰 14:30签到天数: 4 天[LV.2]偶尔看看I
G币1424 最后登录注册时间
意思是你手机和电脑 连结中断
线刷过程中如果电脑死机或 USB线松动 而造成刷机没有刷完成 就会出现
一般情况下 可以直接无视 手机重新线刷会自动识别（不用关机进刷机模式）直接重刷就行
在线时间469 小时经验值541 最后登录注册时间帖子阅读权限60UID4925160
大学本科, 积分 541, 距离下一级还需 159 积分
TA的每日心情衰 14:30签到天数: 4 天[LV.2]偶尔看看I
G币1424 最后登录注册时间
意思是你手机和电脑 连结中断
线刷过程中如果电脑死机或 USB线松动 而造成刷机没有刷完成 就会出现
一般情况下 可以直接无视 手机重新线刷会自动识别（不用关机进刷机模式）直接重刷就行
在线时间245 小时经验值326 最后登录注册时间帖子阅读权限0UID
头像被屏蔽
该用户从未签到
G币73 最后登录注册时间
提示: 作者被禁止或删除 内容自动屏蔽
Powered by您的举报已经提交成功，我们将尽快处理，谢谢！
张雷，现在过的咋样？
只要自己想就去做
大家还关注