Google maps 影响谷歌地图的Twitter引导CSS

我正在使用Twitter引导，并且有一个谷歌地图

地图上的图像（如标记）在引导过程中被CSS扭曲

在引导CSS中有：

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

当我使用Firebug禁用

max width

属性时，标记图像显示正常。

---

如何防止引导CSS影响Google maps图像？

您想通过使用max-width:none超越CSS部分中的max-width规则；这似乎是解决这个问题的方法

在Bootstrap 2.0中，这似乎起到了关键作用：

#mapCanvas img {
  max-width: none;
}

---

地形和覆盖的下拉选择器也存在问题，添加这两个选项将解决问题

#mapCanvas img { 
  max-width: none;
}

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

---

第二种风格会对某些浏览器中的地形和覆盖框的其他问题进行排序。

最新的twitter bootstrap 2.0.4直接包含此修复

---

如果您像在twitter引导的演示页面中一样将内容包装在a（div class=“container”）中，那么您应该添加一个style=“height:100%”

为您的地图画布div提供一个id为

的地图画布

包括id
map\u画布的
max width:none
修复（但它不适用于
mapCanvas
）。
使用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;
}

这些答案对我来说都不管用，所以我走进我的部门，看看它的孩子们，我看到一个新的部门有一个“gm风格”的班级，所以我把这个放在我的CSS中：

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

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

…这就解决了我的问题。
我还必须关闭方框阴影，并且由于我的包含顺序，我添加了！重要的旗帜

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

所有答案都是马克斯·维特：没有

对我来说，最大高度：继承工作

人们正在使用#map、#map#u canvas等等。看看你的父div。
如果它是蓝色的，那么它将是#蓝色的img{}
在任何浏览器中使用Print打印地图也会有问题。
img{max width:100%！important；}
不会被上面的代码固定：您需要添加一个
！重要的
声明如下：

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

确保添加
#mapCanvas img{width:auto；display:inline；}
，如下@nodrogFrom Bootstrap 2.0.3发行说明所述：“修复了自2.0.1起响应图像中的回归支持。我们增加了最大宽度：100%；默认情况下，将图像复制到。我们在上一个版本中删除了它，因为有人抱怨谷歌地图集成和其他项目，但我们现在在这些问题上采取了不同的立场，并将要求开发人员对其进行这些调整。“仅供参考：Bootstrap 2.0.4发行说明：”添加了特殊CSS以防止最大宽度：100%；“奇怪的是，他们最终决定硬编码id，而不是使用类来代替#mapCanvas对我不起作用。我只是使用我的.map类作为谷歌地图容器，它完成了这个任务。谢谢！是的！这一个加上标记为“已接受”的答案，一切似乎都得到了修复。””上面。谢谢。在firefox 17中很有魅力，但在chrome 23中则不然。不知道为什么，但我发现解决方案只是添加了以下内容：
$（'.map'）.on（'show'，function（）{google.maps.event.trigger（map，'resize'）；}）