BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法


Posted in Javascript onJune 07, 2016

最近的一个项目 前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽)。一直在Chrome的仿真机测试非常完美, 没有进行真机测试。完成后,到手机测试时傻了,左右滑动页面时,竟然出现了一个 空白的竖条(如下图所示)。判断是margin-right 设置的长度所致,检查css,并没有相关代码。看来问题出现在了 bootstrap 。虽然不影响 程序的使用,但是感觉非常别扭,一定要修复它。

BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

检查页面,发现用栅格系统的页面才会出现此问题。检查.row相关的css,发现它的margin定义如下:

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

BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法 

.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;
}

BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

.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 在手机端滑动时右侧出现空白的原因及解决办法 

以上所述是小编给大家介绍的BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法,希望对大家有所帮助!

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 #Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 #Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 #Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 #Javascript
Javascript之Number对象介绍
Jun 07 #Javascript
Javascript之Math对象详解
Jun 07 #Javascript
分享jQuery网页元素拖拽插件
Dec 01 #Javascript
You might like
php目录管理函数小结
2008/09/10 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
YII框架http缓存操作示例
2019/04/29 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
JS触摸事件、手势事件详解
2017/05/04 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python版本的读写锁操作方法
2016/04/25 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python标识符命名规范原理解析
2020/01/10 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
办公室岗位职责
2014/02/12 职场文书
企业宣传策划方案
2014/05/29 职场文书
孝女彩金观后感
2015/06/10 职场文书
优秀大学生申请书
2019/06/24 职场文书
详解Python中的进程和线程
2021/06/23 Python