Bootstrap 2.3.2干扰Google地图控件v.3 [英] Bootstrap 2.3.2 interfering to Google maps controls v.3

问题描述

我是新的在bootstrap微博我的版本是2.3.2和之后包括谷歌地图到我的网站，谷歌地图控件去隐形，我做了一个搜索这个问题和一切，我发现它不为我工作：
这个代码固定控件的布局，但它们仍然是不可触及的

I am new in bootstrap twitter my version is 2.3.2 and after including google maps into my site, google maps controls went to invisible, i made a search for this issue and everything I found it didnt work for me: this code fixed the layout of controls but they still are untouchable

#map-canvas img { max-width: none ; max-height:none; }
#map-canvas label { width: auto; display: inline; }

下拉菜单也会变形

<div class="span9">
 <div id="map-canvas"></div>
</div>

推荐答案

从引导文件（ http://getbootstrap.com/getting-started/#third-parties ）：

如果您在Bootstrapped项目中使用Google地图，可能会遇到一些显示问题，因为我们使用了* {box-sizing：border-box; }。以前，您可能还遇到了在图片上使用max-width的问题。以下代码段应避免所有这些问题。

If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of * { box-sizing: border-box; }. Previously, you may have also ran into issues with the use of max-width on images. The following snippet should avoid all those problems.

 /* Fix Google Maps canvas
 *
 * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
 * global `box-sizing` changes. You may optionally need to reset the `max-width`
 * on images in case you've applied that anywhere else. (That shouldn't be as
 * necessary with Bootstrap 3 though as that behavior is relegated to the
 * `.img-responsive` class.)
 */

.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }

/* Optional responsive image override */
img { max-width: none; }

这篇关于Bootstrap 2.3.2干扰Google地图控件v.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！