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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 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使用ActiveMQ实例
2018/02/05 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
如何用Python 加密文件
2020/09/10 Python
python3实现飞机大战
2020/11/29 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
.NET面试10题
2014/02/24 面试题
初二政治教学反思
2014/01/12 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
简历里的自我评价
2014/01/31 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2014年采购工作总结
2014/11/20 职场文书
党建工作汇报材料
2014/12/24 职场文书
公司酒会主持词
2015/07/02 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书