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 保存数组到Cookie的代码
Apr 14 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
实现高性能javascript的注意事项
May 27 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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
mysql 搜索之简单应用
2007/04/27 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
js实现交通灯效果
2017/01/13 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python统计单词出现的次数
2018/04/04 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
小学生植树节活动总结
2014/07/04 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
元宵节晚会主持词
2015/07/01 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS