如何在Zurb Foundation制作响应式Google Map

Question

我尝试使用zurb foundation 3.但谷歌地图有一些问题.当我使用谷歌地图时,列不想响应.

<div class="row">
<div class="six columns">short description</div>
<div class="six columns"><iframe>GOOGLE MAPS CODE</iframe></div>
</div>

请帮助我的任何人.

谢谢

Answer 1

尝试包装它

<div class="flex-video"> </div>

http://foundation.zurb.com/docs/components/flex-video.html

如果您要嵌入来自YouTube,Vimeo或使用iframe,嵌入或>对象元素的其他网站的视频,您可以将视频包装在div.flex-video ##标题##中以创建>将正确的内在比例在任何设备上缩放视频.

Answer 2

您需要将地图封装到具有 id 的元素中map_canvas。

<div class="row">
    <div class="six columns">short description</div>
    <div class="six columns">
        <div id="map_canvas" ><iframe>GOOGLE MAPS CODE</iframe></div>
    </div>
</div>