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等比例缩放图片控制超出范围的图片
Aug 06 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
JavaScript中如何调用Java方法
Sep 16 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中将网址转换为超链接的函数
2011/09/02 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
js中new一个对象的过程
2017/02/20 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
python实现用户答题功能
2018/01/17 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
社团活动策划书范文
2014/01/09 职场文书
合作经营协议书范本
2014/04/17 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
应届生求职信范文
2014/06/30 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
表扬信格式模板
2015/05/05 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers