Twitter Bootstrap CSS影响Google Maps

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

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

在Bootstrap CSS中有：

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

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

对于Bootstrap 2.0，这似乎可以解决问题：

#mapCanvas img {
  max-width: none;
}

地形和叠加层的下拉选择器也存在问题，将它们都添加将解决问题...

#mapCanvas img { 
  max-width: none;
}

#mapCanvas label { 
  width: auto; display:inline; 
} 

第二种样式将在某些浏览器中处理有关地形和覆盖框的其他问题。

为您的地图画布div指定一个ID map_canvas。

此引导提交包含max-width: noneID 的修复程序map_canvas（但不适用于mapCanvas）。

这些答案都不对我有用，因此我进入了div并查看了它的子级，我看到了一个新的div，其类别为“ gm-style”，因此将其放在CSS中：

.gm-style img {
    max-width: none;
  }

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

..那为我解决了问题。

您想通过使用max-width覆盖CSS部分中的max-width规则：none; 这似乎是解决此问题的方法

使用gmap4rails gem更改#MapCanvas对我们不起作用，但是当我们更改为

.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直接包含此修复程序。

如果要将内容包装在Twitter引导程序演示页面中的a（div class =“ container”）中，则应添加style =“ height：100％”

在任何浏览器中使用“打印”来打印地图也存在问题。该img { max-width: 100% !important; }不会是固定由上面的代码：您需要添加一个!important像这样的声明：

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

我还必须关闭box-shadow，并且由于包含顺序的原因，我添加了！important标志。

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

所有答案均为max-widht：none

对我来说，最大高度：继承有效.....

人们正在使用＃map，＃map_canvas等。查看您的父级div。如果是蓝色，则它将是#blue img {}