google-maps - 如何在 Zurb Foundation 中制作响应式谷歌地图

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、embed 或 >object 元素的网站的视频，您可以将视频包装在 div.flex-video ## Heading ##以创建一个>将正确的内在比率在任何设备上缩放您的视频。

Answer 2

我在 Zurb Foundation 中使用了谷歌地图，它对我有用。而且我没有使用 iframe。

<div id="map_canvas" class="six columns" style="height: 800px"></div>

<div class="six columns" style="height: 800px"></div>

Answer 3

您需要将地图包含在一个带有 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>

Answer 4

问题通常是百分比不起作用，当我从

<div id="map_canvas" style="height: 40%;"></div>

至

<div id="map_canvas" style="height: 400px;"></div>

它工作得很好。

Answer 5

到目前为止，“Flex Video”类是最好的方法，尽管它在 div 的底部添加了一个主要的填充。所以它是一个六分之一的另一个。

Answer 6

只需添加 style="max-width:100%;" 到您的 iframe 代码。只要 iframe 在 Foundation 的列之一内，它就会缩放以适应。请注意，这已经用 Foundation 3 进行了测试，而不是 4 或 5。但是，它也应该适用于那些。