twitter-bootstrap - Bootstrap : Using Google Map With Fixed and Responsive Layouts

Question

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

我已了解 Google map 如何对 Bootstrap 布局造成问题以及可用的修复方法。我使用了这段代码，它在多个网站上被列为修复程序:

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

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

使用 Bootstrap 时有什么方法可以实现这两个目标吗？非常感谢分享的任何见解或经验。

Answer 1

你不想像@matt建议的那样使用max-width，但他走在正确的轨道上。流体列设置相对大小。 Google 已经在框架中设置了尺寸，您希望将其覆盖为网格允许的最大尺寸；您想要常规的宽度。

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

我建议将其放在一个名为 #gmap 的 div 中，这样会更合理，

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