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 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
eslint 的三大通用规则详解
May 16 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
微信小程序实现点赞业务
Feb 10 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/07/13 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
给Function做的OOP扩展
2009/05/07 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
python实现的分层随机抽样案例
2020/02/25 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python 在函数上添加包装器
2020/07/28 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
让文件路径提取变得更简单的Python Path库
2021/05/27 Python