影响谷歌地图的 Bootstrap CSS

我用的是 Bootstrap 还有谷歌地图。

地图上的图像，例如标记正在被 Bootstrap 中的 CSS 歪曲。

在 Bootstrap CSS 中有:

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

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

50963 次浏览
小开

您希望通过使用 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;
}

第二种风格将排序的其他问题与地形和覆盖框在一些浏览器。

小开

最新的 Bootstrap 2.0.4直接包含了这个补丁。

如果你像在 Bootstrap 的演示页面中一样将内容包装在 a (div class = “ container”)中，你应该添加一个 style = “ height: 100%”

小开

将您的地图画布 div 的 id 设置为 map_canvas。

这个引导提交 包含 id map_canvas的 max-width: none修复程序(但是对于 mapCanvas不起作用)。

小开

更改 # MapCanvas 并不适合我们使用 gmap4ails gem，但当我们更改为

.map_container img {
max-width: none;
}


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

我正在使用 gmaps4ails，这个修复程序为我做到了:

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

这些答案对我都不起作用，所以我进入我的 div，查看它的子类，我看到一个新的 div 类“ gm-style”，所以我把它放到 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 _ Canvas 等等，看看你的父 div。 如果它是蓝色的，那么它就是 # blue img {}

小开

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

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

提交答案