bootstrap是广泛使用的一个前端框架,
而jQuery.Gantt在目前也是一个很好用的用于绘制甘特图的插件。
 
这次在同时使用它们时,发现甘特图显示异常,如图
 
不加载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之后加载就可以了。

bootstrap和jQuery.Gantt的css冲突问题的更多相关文章

  1. css冲突2 要关闭的css在项目代码以外,但是是通过<link>标签引入的css(例如bootstrap):解决方法,在APP.css中使用全局样式

    css冲突,导致html字体过小. 通过浏览器检查发现,导致字体过小的css来自bootstrap. 现要关闭bootstrap的css: 直接在APP.css中添加: html{ font-size ...

  2. 【转载】 JQuery.Gantt(甘特图) 开发指南

    转载来自: http://www.cnblogs.com/liusuqi/archive/2013/06/09/3129293.html JQuery.Gantt是一个开源的基于JQuery库的用于实 ...

  3. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  4. bootstrap和jquery mobile的对比

    最近一直在研究bootstrap这东西,确实是个好的框架,但是诸多优势背后也隐藏着一些不好的地方,对此,我把它和另一套响应式框架jquery mobile做了一下对比,我的总结如下:    1.boo ...

  5. JQuery.Gantt(甘特图)开发

    一.简介 JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库. 二.前端页面 2.1 资源引用 首先需要将下载到的源码中的CSS.IMG.JS等资源放入 ...

  6. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  7. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  8. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  9. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

随机推荐

  1. BZOJ 1028: [JSOI2007]麻将 暴力

    1028: [JSOI2007]麻将 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/prob ...

  2. liveness 生存性/活性

    翻译了两篇,这篇就不翻译了,自己写吧. 对于线程来说除了安全性,我们还应该重视它的生存性(我认为翻译成三个字说着比較顺). 为了保证线程安全,我们往往须要用到同步,可是同步限制了线程的运行,线程必须为 ...

  3. 基于注解的Spring MVC整合Hibernate(所需jar包,spring和Hibernate整合配置,springMVC配置,重定向,批量删除)

    1.导入jar watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400 ...

  4. Android模拟器操作快捷键

    你可以通过模拟器的启动选项和控制台命令来控制模拟环境的行为和特性.一旦模拟器启动,你就可以通过键盘和鼠标来“按” 模拟器的按键,从而操作模拟器.下面的表格总结了模拟器按键可键盘按键之间的映射关系. 模 ...

  5. Android开发心得(转)

    前言: 很早以前,就听人说过android以后会火起来,作为一个前瞻性对它有所了解会是一个转型的好机会,javaweb太成熟饱和了,现在市面上各种android手机层出不穷,网上各种android视频 ...

  6. 三、Socket之UDP异步传输文件-多文件传输和文件MD5校验

    本文接着上一篇文章二.Socket之UDP异步传输文件,在上一篇文章的基础上实现多文件的传输和文件传输完成后进行完整性校验. 要实现多文件的传输,必须要对文(2)中发送文件的数据格式进行改进,必须加入 ...

  7. win10.10 激活

    最近几天一直有同学来找我说,为什么用密钥或kms神龙版都无法激活win8/8.1.win10,于是我就让这些同学给我截图,结果他们激活出错的信息基本都一样,都是错误:“0XC004F074 软件授权服 ...

  8. 如何使Android Studio项目发布到Jcenter中

    Android仓库 简单的普及下关于android的依赖仓库,有两种分别是Jcenter与Maven Central其实不管是Jcenter还是Maven Central都是Maven库. Jcent ...

  9. 听说alphago又要挑战sc2了?——我眼中的人工智能

    乱谈: 之前alphago进行的围棋比赛相当火爆. 一时间我的朋友圈都爆了,因为同学以及相关专业的同学都在发这个,毕竟逼格一下就起来了,我也大肆转发.各种角度,不同层次的不同深度的文章也都扫了几眼. ...

  10. MySql安装步骤详解,MySql的root密码设置,启动MySql服务。

    1.下载mysql安装包,并解压,双击mysql-5.6.24-winx64.msi 2.点击下一步 3.选择custom 4.选择安装内容和位置,5个安装内容要选择will be installed ...