Twitter引导CSS影响谷歌地图

我正在使用Twitter Bootstrap,并有Google地图。

地图上的图像(如标记)被Bootstrap中的CSS倾斜。

在Bootstrap CSS中有:

img { border: 0 none; height: auto; max-width: 100%; } 

当我使用Firebug禁用max-width属性时,标记图像显示为正常。 如何防止Bootstrap CSS影响Google地图图像?

使用Bootstrap 2.0,这看起来有诀窍:

 #mapCanvas img { max-width: none; } 

地形和叠加的下拉select器也有一个问题,增加这两个将解决问题…

 #mapCanvas img { max-width: none; } #mapCanvas label { width: auto; display:inline; } 

第二种风格将在某些浏览器中对地形和叠加框进行sorting。

给你的地图canvasdiv一个map_canvas的ID。

这个引导提交包括max-width: none修复的id map_canvas (但它不适用于mapCanvas )。

这些答案都没有为我工作,所以我进入我的分区,看着它的孩子,我看到一个类“gm样式”的新的div,所以我把这个在我的CSS:

 .gm-style img { max-width: none; } .gm-style label { width: auto; display:inline; } 

..那为我解决了这个问题。

您希望通过使用max-width:none来覆盖CSS部分中的最大宽度规则; 这似乎是解决这个问题的方法

更改#MapCanvas对于我们使用gmap4rails gem不起作用,但是当我们改变成了

 .map_container img { max-width: none; } .map_container label { width: auto; display:inline; } 

我正在使用gmaps4rails,此修复程序为我做了:

 .gmaps4rails_map img { max-width: none; } .gmaps4rails_map label { width: auto; display:inline; } 

最新的twitter bootstrap 2.0.4直接包含了这个修复。

如果你正在将自己的内容包装在一个(div class =“container”)中,就像twitter bootstrap的演示页面一样,你应该添加一个style =“height:100%”

在任何浏览器中使用Print打印地图也有问题。 img { max-width: 100% !important; } img { max-width: 100% !important; }不会被上面的代码修复: 你需要添加一个!important声明,如下所示:

 @media print { img { max-width: auto !important; } } 

我也不得不打开箱子的阴影,因为我包括的顺序,我添加了!重要的标志。

 #mapCanvas img { max-width: none !important; box-shadow: none !important; } 

所有的答案是最大的widht:没有

对我来说,最大高度:inheritance工作…..

人们正在使用#map,#map_canvas等。看看你的父div。 如果它是蓝色的,比#blue img {}