Twitter bootstrap 推特引导程序搞乱了谷歌图表编辑器

我正在尝试使用谷歌图表编辑器和Twitter Bootstrap4，我认为它们不兼容

下面是一个JSFIDLE，您可以在其中看到演示：

谷歌图表的基本示例：

google.charts.load('current', {packages: ['charteditor']});
 google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

google.charts.load（'current'，{packages:['charteditor']}）；
google.charts.setOnLoadCallback（loadEditor）；
var chartreditor=null；
函数loadEditor（）{
//创建要编辑的图表。
var wrapper=new google.visualization.ChartWrapper({
“图表类型”：“线条图”，
“数据源URL”：”http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1'，
'查询'：'选择A，D，其中D>100按D排序'，
'options'：{'title'：'Population Density（people/km^2）'，'legend'：'none'}
});
chartEditor=新的google.visualization.chartEditor（）；
google.visualization.events.addListener（图表编辑器'ok'，重画图表）；
openDialog（包装，{}）；
}
//在“确定”时，将图表保存到页面上的a。
函数重绘图表（）{
getChartWrapper（）.draw（document.getElementById（'vis_div'））；
}

没有引导4，一切都很好：

---

我需要将Bootstrap与图表编辑器一起使用，但它们不在一起工作，导致此问题的原因是什么？

图表输出的代码包括与Bootstrap的模式组件对齐的

模式对话框

。你能调整那个类名吗？