Twitter引导CSS影响谷歌地图

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

地图上的图像（如标记）被Bootstrap中的CSS倾斜。

在Bootstrap CSS中有：

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

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

Answer 1

使用Bootstrap 2.0，这看起来有诀窍：

 #mapCanvas img { max-width: none; } 

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

我正在使用gmaps4rails，此修复程序为我做了：

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

Answer 8

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

如果你正在将自己的内容包装在一个（div class =“container”）中，就像twitter bootstrap的演示页面一样，你应该添加一个style =“height：100％”

Answer 9

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

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

Answer 10

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

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

Answer 11

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

对我来说，最大高度：inheritance工作…..

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