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 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python二维码生成识别实例详解
2019/07/16 Python
jupyter notebook 重装教程
2020/04/16 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
什么是Python包的循环导入
2020/09/08 Python
python之随机数函数的实现示例
2020/12/30 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
查询优化的一般准则有哪些
2015/03/08 面试题
考博自荐信
2013/10/25 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
成绩单家长意见
2015/06/03 职场文书
婚育证明样本
2015/06/16 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js