Question

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

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

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

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

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

Answer 1

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

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

我建议将其放在名为div的{{1}}中，但更合理，

#gmap

Answer 2

使用它。这个对我有用。希望它也能解决你的问题

    <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheigh
    t="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q
    &amp;hl=en&amp;geocode=&amp;q=Littlehampton,+UK&amp;aq=0&amp;oq=little&amp;s
    ll=53.800651,-4.064941&amp;sspn=20.121063,44.384766&amp;ie=UTF8&amp;hq=&amp;
    hnear=Littlehampton,+West+Sussex,+United+Kingdom&amp;t=m&amp;ll=50.811033,-0
    .538673&amp;spn=0.018982,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed">
    </iframe>

Answer 3

http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio中描述的技术效果很好。

只需使用Google地图代码替换此处示例中的“部分文字”。

Answer 4

实际上如果你只是使用谷歌地图IFRAME嵌入你可以通过简单地将它添加到你的CSS（假设你没有使用任何其他iframe：

）使其响应

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

如果您的容器/主题有响应，这将非常有用。

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

4 个答案: