使用bootstrap网站显示Google Map API的问题

Question

我想要做的是在我的网络应用程序中显示我的谷歌地图API。

我尝试使用普通的html网站，地图正在显示。

我的问题是谷歌地图API没有显示引导程序。有没有人知道如何解决这个问题？

我的代码工作正常w / out bootstrap：http://jsfiddle.net/PrHDH/84/

在放入bootstrap后，地图不会显示。

with bootstrap: http://jsfiddle.net/5kcsn/330/＆lt; --------地图不会显示

Answer 1

问题是google和bootstrap如何处理他们的盒子大小调整之间的冲突。最简单的解决方案是覆盖地图画布元素上的box-sizing css属性。

#map-canvas { 
    height: 50%; width: 80%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; 
}

您可以通过以下链接找到有关此问题和替代解决方案的bootstrap文档。看起来像bootstrap甚至有一些mixins来帮忙 http://getbootstrap.com/getting-started/#third-parties