bootstrap和jQuery.Gantt的css沖突 如何解決
bootstrap是廣泛使用的一個(gè)前端框架，而jQuery.Gantt在目前也是一個(gè)很好用的用于繪制甘特圖的插件。
這次在同時(shí)使用它們時(shí)，發(fā)現(xiàn)甘特圖顯示異常，如圖
不加載bootstrap.css，甘特圖就不會(huì)出問(wèn)題，很容易就定位出現(xiàn)bootstrap的css沖突問(wèn)題。
但是要實(shí)際定位到具體是哪個(gè)樣式所導(dǎo)致的卻花了一些功夫。
1、先看了甘特圖里與bootstrap的重復(fù)樣式，有一個(gè).row，于是我把gantt插件的row全部修改成了ganttrow，發(fā)現(xiàn)沒(méi)效果。
2、再是看了bootstrap中對(duì)標(biāo)簽如body，div使用的樣式，也沒(méi)影響。
3、最后是用了很蠢的“二分法”，一半一半刪除bootstrap.css里的內(nèi)容，然后查看甘特圖是否異常。
最終定位出是bootstrap.css中如下樣式所導(dǎo)致的，確實(shí)在排查中忘了*這個(gè)所有標(biāo)簽。
*{
-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之后加載就可以了。
大家可以試著解決一下，謝謝大家的閱讀。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JSON 數(shù)據(jù)詳解及實(shí)例代碼分析
這篇文章主要介紹了JSON 數(shù)據(jù)詳解及實(shí)例代碼分析的相關(guān)資料,需要的朋友可以參考下2017-01-01
JS使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能分析
這篇文章主要介紹了JS使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了JS基于正則表達(dá)式的表單驗(yàn)證功能原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
js表格分頁(yè)實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-09-09
kindeditor修復(fù)會(huì)替換script內(nèi)容的問(wèn)題
這里給大家分享的是個(gè)人修改的kindeditor的代碼，主要是修復(fù)了一些BUG，添加了些常用功能，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
單元測(cè)試框架Jest搭配TypeScript的安裝與配置方式
這篇文章主要介紹了單元測(cè)試框架Jest搭配TypeScript的安裝與配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
微信小程序scroll-view指定滾動(dòng)元素起始位置怎么做
scroll-view為滾動(dòng)視圖,分為水平滾動(dòng)和垂直滾動(dòng),這篇文章主要給大家介紹了關(guān)于微信小程序scroll-view不能左右滑動(dòng)問(wèn)題的解決方法,需要的朋友可以參考下2022-12-12
建立良好體驗(yàn)度的Web注冊(cè)系統(tǒng)ajax
建立良好體驗(yàn)度的Web注冊(cè)系統(tǒng)ajax...2007-07-07
小程序開發(fā)?page-container?頁(yè)面容器彈出對(duì)話框功能的實(shí)現(xiàn)
這篇文章主要介紹了小程序開發(fā)?page-container?頁(yè)面容器，彈出對(duì)話框,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
H5實(shí)現(xiàn)仿flash效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了H5實(shí)現(xiàn)仿flash效果的實(shí)現(xiàn)代碼的相關(guān)資料,希望通過(guò)本文能幫助到大家，實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
alert(3)就這么段程序，沒(méi)有寫在function中，想啊想，怎么終止js呢？jfslk也能達(dá)到一樣的效果(終止js程序)2013-05-05