影响谷歌地图的 Twitter Bootstrap CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9141249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap CSS affecting Google Maps
提问by raklos
I'm using Twitter Bootstrap, and have a Google map.
我正在使用 Twitter Bootstrap，并有一个谷歌地图。
Images on the map, such as marker are being skewed by the CSS in Bootstrap.
地图上的图像（例如标记）被 Bootstrap 中的 CSS 倾斜。
In the Bootstrap CSS there is:
在 Bootstrap CSS 中有：
img {
border: 0 none;
height: auto;
max-width: 100%;
}
When I disable the max-widthproperty using Firebug, the marker image appears as normal.
How can I prevent the Bootstrap CSS from affecting the Google maps images?
当我max-width使用 Firebug禁用该属性时，标记图像显示正常。如何防止 Bootstrap CSS 影响 Google 地图图像？
回答by kevinwmerritt
With Bootstrap 2.0, this seemed to do the trick:
使用 Bootstrap 2.0，这似乎可以解决问题：
#mapCanvas img {
max-width: none;
}
回答by nodrog
There is also an issue with the dropdown selectors for terrain and overlays, adding both these will fix the issues...
地形和叠加层的下拉选择器也存在问题，添加这两个将解决问题...
#mapCanvas img {
max-width: none;
}
#mapCanvas label {
width: auto; display:inline;
}
The second style will sort of other issues with the terrain and overlay box in some browsers.
第二种样式将解决某些浏览器中地形和覆盖框的其他问题。
回答by robd
Give your map canvas div an id of map_canvas.
给你的地图画布 div 一个 id map_canvas。
This bootstrap commitincludes the max-width: nonefix for the id map_canvas(but it won't work for mapCanvas).
此引导程序提交包括对max-width: noneid的修复map_canvas（但它不适用于mapCanvas）。
回答by Christopher Dow
None of these answers worked for me, so I went in to my div and looked at its children I saw a new div with class "gm-style", so I put this in my CSS:
这些答案都不适合我，所以我进入了我的 div 并查看了它的孩子我看到了一个带有“gm-style”类的新 div，所以我把它放在我的 CSS 中：
.gm-style img {
max-width: none;
}
.gm-style label {
width: auto; display:inline;
}
..and that solved the problem for me.
..这为我解决了这个问题。
回答by Pawpoint
You want to over-ride the max-width rule in the CSS section by using max-width: none; This seems to be the way around this problem
您想通过使用 max-width: none; 来覆盖 CSS 部分中的 max-width 规则。这似乎是解决这个问题的方法
回答by Sam Joseph
Changing the #MapCanvas didn't work for us using gmap4rails gem, but did when we changed to
使用 gmap4rails gem 更改 #MapCanvas 对我们不起作用，但是当我们更改为
.map_container img {
max-width: none;
}
.map_container label {
width: auto; display:inline;
}
回答by Benjamin Crouzier
I am using gmaps4rails, this fix did it for me:
我正在使用 gmaps4rails，此修复程序为我完成了：
.gmaps4rails_map img {
max-width: none;
}
.gmaps4rails_map label {
width: auto; display:inline;
}
回答by redochka
latest twitter bootstrap 2.0.4 includes this fix directly.
最新的 twitter bootstrap 2.0.4 直接包含此修复程序。
If you are wrapping your content in the a (div class="container") as in the demo page of twitter bootstrap, you should add a style="height: 100%"
如果您将内容包装在 a (div class="container") 中，就像在 twitter bootstrap 的演示页面中一样，您应该添加一个 style="height: 100%"
回答by tempranova
There is also an issue with printing maps using Print in any browser. The img { max-width: 100% !important; }will not be fixed by the code above: you need to add an !importantdeclaration like so:
在任何浏览器中使用 Print 打印地图也存在问题。该img { max-width: 100% !important; }不会是固定由上面的代码：您需要添加一个!important像这样的声明：
@media print {
img {
max-width: auto !important;
}
}
回答by Redtopia
I also had to turn box-shadow off, and because of the order of my includes, I added the !important flag.
我还必须关闭 box-shadow，并且由于我的包含顺序，我添加了 !important 标志。
#mapCanvas img {
max-width: none !important;
box-shadow: none !important;
}
