如何在 Zurb Foundation 中制作响应式谷歌地图答案

【问题标题】：How to make responsive Google Map in Zurb Foundation如何在 Zurb Foundation 中制作响应式谷歌地图
【发布时间】：2013-04-17 08:22:52
【问题描述】：

我已经尝试使用 zurb Foundation 3。但是谷歌地图有一些问题。当我使用谷歌地图时，列不想响应。

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

任何人都可以帮助我，拜托。

谢谢

【问题讨论】：

Zurb f6 - 使用响应式嵌入：foundation.zurb.com/sites/docs/responsive-embed.html

标签： google-maps zurb-foundation

【解决方案1】：

试着把它包起来

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

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

如果您要嵌入来自 YouTube、Vimeo 或其他使用 iframe、embed 或 >object 元素的网站的视频，您可以将视频包装在 div.flex-video ## Heading ## 以创建一个内在比例>将在任何设备上正确缩放您的视频。

【讨论】：

这个解决方案在没有 iframe 的情况下也能很好地工作

【解决方案2】：

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

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

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

【讨论】：

但它对我不起作用，尺寸相同，没有响应。我可以看看您使用上述方法的网站吗？谢谢

【解决方案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>

【讨论】：

不，它内置在 F3 中。如果你去 foundation.css 签到，你会在几个地方找到该课程。
是的，我找到了代码 [#map_canvas embed { max-width: none; }] 但你的建议没有奏效。 ???
我有一个网站，我使用了我给你的技术。不幸的是，我无法在此处链接到它并向您展示它，因为它会违反此处的规则。（看起来像我在做广告）。我试着把它放在 jsfiddle 但谷歌地图不会在那里加载。明天我会检查是否可能以及如何在 jsfiddle 中加载 Google 地图，以便我可以向您展示它的工作原理 - 以及如何使其在此过程中工作。现在干杯。

【解决方案4】：

当我从

纠正时，问题通常是百分比不起作用

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

到

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

效果很好。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：