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，嵌入或＆gt;对象元素的其他网站的视频，您可以将视频包装在div.flex-video ##标题##中以创建固有比率＆gt;将在任何设备上正确缩放您的视频。

Answer 2

我使用谷歌地图与Zurb基金会，它为我工作。我没有使用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.但是，它也适用于那些。

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

6 个答案: