Bootstrap 2.3.2 干扰谷歌地图控件 v.3

Question

我是 bootstrap twitter 的新手，我的版本是 2.3.2，在我的网站中包含谷歌地图后，谷歌地图控件变得不可见，我搜索了这个问题，发现它对我不起作用： 此代码修复了控件的布局，但它们仍然无法触及

#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>

Answer 1

来自引导文档 (http://getbootstrap.com/getting-started/#third-parties)：

如果您在 Bootstrapped 项目中使用 Google 地图，由于我们使用 * { box-sizing: border-box; 可能会遇到一些显示问题。 }。以前，您可能还遇到了在图像上使用最大宽度的问题。下面的 sn-p 应该可以避免所有这些问题。

 /* 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; }