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或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
json数据处理及数据绑定
Jan 25 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
vue-router传参用法详解
2019/01/19 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python中Mako库实例用法
2020/12/31 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
加强作风建设工作总结
2014/10/23 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
警用民用对讲机找不同
2022/02/18 无线电
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python