如何解决bootstrap和jQuery之间的css冲突 甘特（图表）设计的

Bootstrap是一个广泛使用的前端框架，而jQuery。甘特图也是目前绘制甘特图非常有用的插件。

这次同时使用时，发现甘特图显示异常，如图。

不加载bootstrap.css，甘特图不会出错，很容易定位bootstrap的css冲突。然而，它花了一些努力来实际定位是哪种风格造成的。1.首先，我阅读了甘特图中bootstrap的重复样式，有一个. row，所以我把甘特图插件的所有行都改成了ganttrow，结果发现没有用。2.在阅读了bootstrap中用于body和div等标签的样式后，没有影响。3.最后，我们用了一个愚蠢的“二分法”，将bootstrap.css中的内容删除一半，然后检查甘特图是否异常。

最后，确定是bootstrap.css中的以下样式导致的，确实在故障排除中忘记了所有的标签*。

* {-web kit-box-siz :边框-box；-moz-box-siz :边框盒；盒子尺寸：边框盒子；}解决方法：如果甘特图的div像“div class='甘特图'/div”，只需在自定义css中添加即可。gantt div {-web kit-box-sizing :内容框；-moz-box-siz :内容盒；盒子大小：内容盒；}然后在bootstrap.css之后加载自定义css.

你可以试着解决它。感谢阅读。

如果你还想深入学习，可以点击这里学习，然后为你附上3个精彩话题：

引导教程。

自举实用教程。

引导插件教程。

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