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

时间:2013-09-27 10:18:28

标签: css google-maps twitter-bootstrap google-maps-api-3

我是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>

enter image description here

1 个答案:

答案 0 :(得分:3)

来自bootstrap docs(http://getbootstrap.com/getting-started/#third-parties):

  

如果您在Bootstrapped项目中使用Google地图,由于我们使用* {box-sizing:border-box; }。以前,您可能还遇到了在图像上使用max-width的问题。以下代码段应该避免所有这些问题。

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