当前位置: 首页 > 编程笔记 >

bootstrap和jQuery.Gantt的css冲突 如何解决

仲鸿风
2023-03-14
本文向大家介绍bootstrap和jQuery.Gantt的css冲突 如何解决,包括了bootstrap和jQuery.Gantt的css冲突 如何解决的使用技巧和注意事项,需要的朋友参考一下

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之后加载就可以了。

大家可以试着解决一下,谢谢大家的阅读。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

 类似资料:
  • 问题内容: 我正在尝试在同时引用 jQueryUI 和 Bootstrap 3 的View 上使用。如果我在jQueryUI的js之后加载Boostrap,则调用成功,但是如果我在Bootstrap之后调用jQueryUI,则出现错误,并且没有任何效果。您可以自己尝试。互联网上对此进行了大量讨论,我询问了有关GitHub的问题,但我还找不到解决方案。 问题答案: 理想的解决方案是采用没有工具提示的

  • 问题内容: 我对Rails资产管道有些陌生,所以我可能做错了什么。我正在尝试将Active Admin用于后端,将twitter bootstrap css用于前端应用程序。 我将bootstrap.css添加到 / app / assets / stylesheets中, 然后还添加了: 到application.css-然​​后我在本地对资产进行了预编译 它似乎工作正常,但某些样式未完全通过,

  • 问题内容: //这是我的代码,我正在代理工作… //以下错误出现在我的控制台上 我正在使用以下罐子 问题答案: 该班已搬迁到另一个包中的HttpClient 4.4。 从4.4开始 将您的httpcore版本升级到至少4.4即可解决该问题。

  • C STLunordered_map如何解决冲突? 看着http://www.cplusplus.com/reference/unordered_map/unordered_map/,它说“唯一的键容器中的两个元素不能有相同的键。” 这意味着容器确实在解决碰撞。然而,那一页并没有告诉我它是如何做到的。我知道一些解决冲突的方法,比如使用链表和/或探测。我想知道的是c STL无序_映射是如何解决它的。

  • Windows 用tutorial进行的操作 若要进行pull操作,请右击tutorial目录,并选择‘拉取’。 用tutorial进行的操作 在以下画面点击‘确定’。 用tutorial进行的操作 我们看到画面上的警告信息表示自动合并失败。请点击‘关闭’以退出窗口。 用tutorial进行的操作 若您确认变更,请点击‘Yes’。 用tutorial进行的操作 TortoiseGit告诉我们:因"

  • 在上一个页面我们提及到,执行合并即可自动合并Git修改的部分。但是,也存在无法自动合并的情况。 如果远程数据库和本地数据库的同一个地方都发生了修改的情况下,因为无法自动判断要选用哪一个修改,所以就会发生冲突。 Git会在发生冲突的地方修改文件的内容,如下图。所以我们需要手动修正冲突。 ==分割线上方是本地数据库的内容, 下方是远程数据库的编辑内容。 如下图所示,修正所有冲突的地方之后,执行提交。

  • 解决冲突 CVS使用内联“冲突标志”来标记冲突,并且在更新时打印C。历史上讲,这导致了许多问题,因为CVS做得还不够。许多用户在它们快速闪过终端时忘记(或没有看到)C,即使出现了冲突标记,他们也经常忘记,然后提交了带有冲突标记的文件。 Subversion通过让冲突更明显来解决这个问题,它记住一个文件是处于冲突状态,在你运行svn resolved之前不会允许你提交修改,详情见“解决冲突(合并别人

  • 我有一个相当大的遗留项目,我正在添加一个组件。此组件使用HtmlUnit。我可以用Maven编译它,但是当我运行它时,我得到: 所以它缺少正确的构造函数。我认为这几乎肯定是中的版本冲突,但我不确定如何解决它。下面是我的(请注意我一直尝试玩的排除和依赖关系管理的所有游戏): 有什么想法吗? 编辑:有人认为这个问题是这个问题的重复,但事实并非如此,因为本例中的依赖类型不是。