Css conflicts between bootstrap and jQuery. Gantt, and bootstrapcss conflicts.

Css conflicts between bootstrap and jQuery. Gantt, and bootstrapcss conflicts.
Bootstrap is a widely used front-end framework, and jQuery. Gantt is also a useful plug-in for drawing Gantt charts. When they are used at the same time, it is found that the Gantt chart shows an exception. If you do not need bootstrap.css, the Gantt chart will not have any problems and it is easy to locate the css conflict issue of bootstrap. However, it takes some effort to locate the specific style. 1. First, let's look at the recurring style in the Gantt chart and bootstrap. There is one. row, so I changed all the row of the gantt plug-in to ganttrow, and found no effect. 2. the style used by bootstrap for tags such as body and div is not affected. 3rd, the last step is to use a very stupid binary method to delete the content in bootstrap.css, and then check whether the Gantt chart is abnormal. The final positioning result is caused by the following styles in bootstrap.css. It is true that all the labels * are missing during troubleshooting. * {-Webkit-box-sizing: border-box;-moz-box-sizing: border-box ;}Solution:If the div of a gantt chart is like this "<div class = 'gantt'> </div>", you only need to add it to the custom css. gantt div {-webkit-box-sizing: content-box;-moz-box-sizing: content-box; box-sizing: content-boxafter the custom CSS is loaded after bootstrap.css.