Twitter Bootstrap CSS 影响谷歌地图答案

【问题标题】：Twitter Bootstrap CSS affecting Google MapsTwitter Bootstrap CSS 影响谷歌地图
【发布时间】：2012-02-26 19:32:58
【问题描述】：

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

地图上的图像，例如标记被 Bootstrap 中的 CSS 倾斜。

在 Bootstrap CSS 中有：

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

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

【问题讨论】：

在这里回答：github.com/zurb/foundation/issues/26

标签： google-maps twitter-bootstrap css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

所有答案都是最大宽度：无

对我来说， max-height:inherit 有效.....

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这对我有用。如果你要对某人投反对票，你至少应该说出原因。

【解决方案4】：

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

This bootstrap commit 包含对 id map_canvas 的 max-width: none 修复（但不适用于 mapCanvas）。

【讨论】：

我认为在 v2.2.2 中只需要更改 id
我在 css 文件中找不到这样的 id
@robd : 只是好奇，为什么除了 map_canvas 之外它不起作用。
@ArunRaj 因为引导程序中的修复被硬编码为 #map_canvas id（请参阅链接的提交）。无论如何，这个答案现在可能已经过时了，因为它已经有将近 2 年的历史了。

【解决方案5】：

这些答案都不适合我，所以我进入了我的 div 并查看了它的子项，我看到了一个新的 div 类“gm-style”，所以我把它放在我的 CSS 中：

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

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

..这为我解决了问题。

【讨论】：

+1 这是对我修复奇怪的“缩放”控件有用的唯一答案。（引导程序 2）
也为我工作。很好的发现:)
谢谢，也为我工作。唯一对我有用的解决奇怪的“缩放”控件的答案。（与基金会 5）

【解决方案6】：

我正在使用 gmaps4rails，这个修复对我有用：

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

【讨论】：

【解决方案7】：

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

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}

【讨论】：

【解决方案8】：

地形和叠加层的下拉选择器也存在问题，添加这两者将解决问题...

#mapCanvas img { 
  max-width: none;
}

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

第二种样式会在某些浏览器中与地形和覆盖框有关。

【讨论】：

是的！结合上面标记为“已接受”的答案，一切似乎都已解决。谢谢。
在 Firefox 17 中像魅力一样工作，但在 chrome 23 中却没有。不知道为什么，但我找到了解决方案，只需添加以下内容：$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });
你是个天才。非常感谢。这让我发疯:-)

【解决方案9】：

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

如果您将内容包装在 a (div class="container") 中，就像在 twitter bootstrap 的演示页面中一样，您应该添加一个 style="height: 100%"

【讨论】：

【解决方案10】：

使用 Bootstrap 2.0，这似乎可以解决问题：

#mapCanvas img {
  max-width: none;
}

【讨论】：

确保添加#mapCanvas img { width: auto; display:inline; }，如下@nodrog 所述
来自 Bootstrap 2.0.3 发行说明：“从 2.0.1 开始，响应式图像支持中的修复回归。我们重新添加了 max-width: 100%; 默认情况下图像。我们删除了它在我们的上一个版本中，因为有人抱怨 Google 地图集成和其他项目，但我们现在对这些事情采取了不同的立场，并将要求开发人员最终做出这些调整。”
仅供参考：Bootstrap 2.0.4 发行说明：“添加了特殊的 CSS 以防止最大宽度：100%；在图像上破坏 Google 地图的渲染。”
奇怪的是他们最终决定硬编码id，而不是使用class
#mapCanvas 对我不起作用。我刚刚使用了我用作谷歌地图容器的 .map 类，它成功了。谢谢！

【解决方案11】：

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

【讨论】：