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