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 相关文章推荐
javascript写的一个链表实现代码
Oct 25 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
Angular短信模板校验代码
Sep 23 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
深入理解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中stdClass的用法分析
2015/02/27 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
简洁的十分钟Python入门教程
2015/04/03 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python中对数据进行各种排序的方法
2019/07/02 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
生产内勤岗位职责
2013/12/07 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
企业内控岗位的职责
2014/02/07 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
公证委托书
2014/08/01 职场文书
干部年终考核评语
2015/01/04 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
Python Parser的用法
2021/05/12 Python