Bootstrap and Jquery.gantt CSS conflicts how to solve _javascript skills

Bootstrap is a widely used front-end framework, and Jquery.gantt is now a handy plug-in for charting a Gantt chart.

When you use them at the same time, you find that the Gantt Chart shows an exception, as shown in

Without loading the BOOTSTRAP.CSS, the Gantt chart will not go wrong and it is easy to locate the bootstrap CSS conflict problem.
But it takes a bit of effort to actually navigate to which style it is created.
1, first look at the Gantturi and bootstrap repeat style, there is a. Row, so I put the Gantt plug-in row all modified into a ganttrow, found no effect.
2, again see the Bootstrap in the label, such as the use of Body,div style, also did not affect.
3, the last is a very stupid "binary", half of the bootstrap.css to delete the contents, and then see if the Gantt Chart is abnormal.

The final positioning is the BOOTSTRAP.CSS in the following style caused by, indeed in the investigation to forget the * all tags.

*{
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 Box-sizing:border-box;
}

Workaround:
If the Gantt div is like this "<div class= ' Gantt ' ></div>"
Just add in the custom CSS

. Gantt div{
 -webkit-box-sizing:content-box;
 -moz-box-sizing:content-box;
 Box-sizing:content-box;
}

Then put the custom CSS in the bootstrap.css after loading on it.

We can try to solve it, thank you for your reading.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn.