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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
深入理解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 strncasecmp字符串比较的小技巧
2011/01/04 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
从零学Python之引用和类属性的初步理解
2014/05/15 Python
django初始化数据库的实例
2018/05/27 Python
Python装饰器用法实例分析
2019/01/14 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python数学形态学实例分析
2019/09/06 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
人力资源求职信
2014/05/25 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
工作简历自我评价
2015/03/11 职场文书
2016党员党课心得体会
2016/01/07 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
Java使用HttpClient实现文件下载
2022/08/14 Java/Android