bootstrap和jQuery.Gantt的css沖突 如何解決
更新時間：2016年05月29日 08:33:23 作者：East2_100
這篇文章主要介紹了bootstrap和jQuery.Gantt的css沖突，本文給出了解決沖突的解決方法，感興趣的小伙伴們可以參考一下
bootstrap是廣泛使用的一個前端框架，而jQuery.Gantt在目前也是一個很好用的用于繪制甘特圖的插件。
這次在同時使用它們時，發(fā)現甘特圖顯示異常，如圖
不加載bootstrap.css，甘特圖就不會出問題，很容易就定位出現bootstrap的css沖突問題。
但是要實際定位到具體是哪個樣式所導致的卻花了一些功夫。
1、先看了甘特圖里與bootstrap的重復樣式，有一個.row，于是我把gantt插件的row全部修改成了ganttrow，發(fā)現沒效果。
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個精彩的專題：
以上就是本文的全部內容，希望對大家的學習有所幫助。
相關文章
這篇文章主要介紹了JSON 數據詳解及實例代碼分析的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JS使用正則表達式實現常用的表單驗證功能,結合實例形式分析了JS基于正則表達式的表單驗證功能原理、實現技巧與操作注意事項,需要的朋友可以參考下2020-04-04
js表格分頁實現代碼，需要的朋友可以參考下。2009-09-09
這里給大家分享的是個人修改的kindeditor的代碼，主要是修復了一些BUG，添加了些常用功能，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
單元測試框架Jest搭配TypeScript的安裝與配置方式
這篇文章主要介紹了單元測試框架Jest搭配TypeScript的安裝與配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
scroll-view為滾動視圖,分為水平滾動和垂直滾動,這篇文章主要給大家介紹了關于微信小程序scroll-view不能左右滑動問題的解決方法,需要的朋友可以參考下2022-12-12
建立良好體驗度的Web注冊系統(tǒng)ajax...2007-07-07
小程序開發(fā)?page-container?頁面容器彈出對話框功能的實現
這篇文章主要介紹了小程序開發(fā)?page-container?頁面容器，彈出對話框,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了H5實現仿flash效果的實現代碼的相關資料,希望通過本文能幫助到大家，實現這樣的功能，需要的朋友可以參考下2017-09-09
alert(3)就這么段程序，沒有寫在function中，想啊想，怎么終止js呢？jfslk也能達到一樣的效果(終止js程序)2013-05-05