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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
laypage+SpringMVC实现后端分页
Jul 27 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
详解vue身份认证管理和租户管理
May 25 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
根德YB400的电路分析
2021/03/02 无线电
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
php探针不显示内存解决方法
2019/09/17 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
让焦点自动跳转
2006/07/01 Javascript
提高 DHTML 页面性能
2006/12/25 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
python3.4中清屏的处理方法
2020/07/06 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
领导的自我鉴定
2013/12/28 职场文书
旅游活动总结
2014/08/27 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
公积金贷款承诺书
2015/04/30 职场文书
单位车辆管理制度
2015/08/05 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
Python基础之Socket通信原理
2021/04/22 Python