Bootstrap:使用具有固定和响应布局的Google Map

Question

我正在尝试在Boostrap布局中放置Google地图,使用传统网页上的固定宽度,并在移动设备上查看时使用自适应布局.

我已经了解了Google地图如何解决Bootstrap布局和可用修复方面的问题.我使用了这段代码,它被列为几个站点上的修复程序:

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

这适用于固定布局,但在移动设备上查看时不提供任何响应.

使用Bootstrap时有没有办法实现这两个目标？任何分享的见解或经验都非常感谢.

Answer 1

你并不max-width像@matt那样建议,但他走在正确的轨道上.流体柱设置相对大小.Google已经在框架中设置了大小,您希望将其覆盖到网格允许的最大尺寸; 你想要经常width.

iframe, object, embed { width: 100%; }

我建议把它放在一个div被叫的#gmap并且更合理的情况下,

#gmap iframe, #gmap object, #gmap embed { width: 100%; }