bootstrap和jQuery.Gantt的css沖突 如何解決
bootstrap是廣泛使用的一個(gè)前端框架，而jQuery.Gantt在目前也是一個(gè)很好用的用于繪制甘特圖的插件。
這次在同時(shí)使用它們時(shí)，發(fā)現(xiàn)甘特圖顯示異常，如圖
不加載bootstrap.css，甘特圖就不會(huì)出問題，很容易就定位出現(xiàn)bootstrap的css沖突問題。
但是要實(shí)際定位到具體是哪個(gè)樣式所導(dǎo)致的卻花了一些功夫。
1、先看了甘特圖里與bootstrap的重復(fù)樣式，有一個(gè).row，于是我把gantt插件的row全部修改成了ganttrow，發(fā)現(xiàn)沒效果。
2、再是看了bootstrap中對(duì)標(biāo)簽如body，div使用的樣式，也沒影響。
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è)精彩的專題：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要介紹了JS正則獲取HTML元素的方法,結(jié)合實(shí)例形式分析了JS針對(duì)頁面HTML元素正則操作相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2017-03-03
Bootstrap-table自定義可編輯每頁顯示記錄數(shù)
這篇文章主要介紹了Bootstrap-table自定義可編輯每頁顯示記錄數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
javascript定時(shí)器取消定時(shí)器及優(yōu)化方法
這篇文章主要介紹了 javascript定時(shí)器取消定時(shí)器及js定時(shí)器優(yōu)化方法的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了ES6教程之for循環(huán)和Map,Set用法,結(jié)合實(shí)例形式分析了ECMAScript6中for循環(huán)和Map,Set基本概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
使用bootstrap實(shí)現(xiàn)多窗口和拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了使用bootstrap實(shí)現(xiàn)多窗口和拖動(dòng)效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
本文給大家介紹js控制偽元素的方法匯總，本文涉及到獲取偽元素屬性值的方法，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
C#中TrimStart,TrimEnd,Trim在javascript上的實(shí)現(xiàn)
今天在后臺(tái)寫了個(gè)類,后來才發(fā)現(xiàn),需要在JS上做..于是把代碼拷到j(luò)s上進(jìn)行修改,代碼中用到TrimStart,TrimEnd,Trim等方法,在網(wǎng)上找半天竟然沒找到.要么就只能清除空格的!2011-01-01
Form表單按回車自動(dòng)提交表單的實(shí)現(xiàn)方法
本文給大家分享form表單按回車自動(dòng)提交表單的方法，在前端開發(fā)中經(jīng)常會(huì)遇到，今天小編給大家介紹具體實(shí)現(xiàn)方法，感興趣的朋友一起看看2016-11-11
js鍵盤上下左右鍵怎么觸發(fā)function(實(shí)例講解)
這篇文章主要是對(duì)js鍵盤上下左右鍵怎么觸發(fā)function 進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
認(rèn)識(shí)Knockout及如何使用Knockout綁定上下文
Knockout簡稱ko，是一個(gè)輕量級(jí)的javascript類庫，采用MVVM設(shè)計(jì)模式（即Model、view、viewModel），簡單優(yōu)雅的實(shí)現(xiàn)了雙向綁定，實(shí)時(shí)更新，幫助您使用干凈的數(shù)據(jù)模型來創(chuàng)建豐富的、響應(yīng)式的用戶界面2015-12-12