bootstrap和jQuery.Gantt的css冲突 如何解决


Posted in Javascript onMay 29, 2016

bootstrap是广泛使用的一个前端框架,而jQuery.Gantt在目前也是一个很好用的用于绘制甘特图的插件。 

这次在同时使用它们时,发现甘特图显示异常,如图

 bootstrap和jQuery.Gantt的css冲突 如何解决

不加载bootstrap.css,甘特图就不会出问题,很容易就定位出现bootstrap的css冲突问题。
但是要实际定位到具体是哪个样式所导致的却花了一些功夫。
1、先看了甘特图里与bootstrap的重复样式,有一个.row,于是我把gantt插件的row全部修改成了ganttrow,发现没效果。
2、再是看了bootstrap中对标签如body,div使用的样式,也没影响。
3、最后是用了很蠢的“二分法”,一半一半删除bootstrap.css里的内容,然后查看甘特图是否异常。 

最终定位出是bootstrap.css中如下样式所导致的,确实在排查中忘了*这个所有标签。

*{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

解决方法:
如果甘特图的div是这样的“<div class='gantt'></div>”
只要在自定义的css中加入

.gantt div{
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
}

然后把自定义css放在bootstrap.css之后加载就可以了。

大家可以试着解决一下,谢谢大家的阅读。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
深入理解js数组的sort排序
May 28 #Javascript
深入理解js函数的作用域与this指向
May 28 #Javascript
js和C# 时间日期格式转换的简单实例
May 28 #Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 #Javascript
深入理解JS函数的参数(arguments)的使用
May 28 #Javascript
深入理解js中this的用法
May 28 #Javascript
关于function类中定义变量this的简单说明
May 28 #Javascript
You might like
PHP封装的字符串加密解密函数
2015/12/18 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python字典序问题实例
2014/09/26 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
食品营养与检测应届生求职信
2013/11/08 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
中文教师求职信
2014/02/22 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
党校党性分析材料
2014/12/19 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书