Bootstrap：使用具有固定和響應式佈局的Google地圖

我試圖在Boostrap佈局中放置Google地圖，在傳統網頁上使用固定寬度並在移動設備上查看時使用響應式佈局。Bootstrap：使用具有固定和響應式佈局的Google地圖

我已閱讀Google地圖如何導致Bootstrap佈局和可用修復問題。我用這個代碼片段，它被列爲一個固定的幾個網站：

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

這適用於一個固定的佈局，但在移動設備上查看時不提供任何響應。

使用Bootstrap時，有什麼方法可以實現這兩個目標嗎？任何見解或經驗共享非常感謝。

來源

2012-06-20 Why Not

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

只需使用Google地圖代碼替換那裏給出的示例中的「某些文本」即可。

來源

2012-06-28 12:42:24 DaveP

感謝，它的工作完美的我 – jpprade

其實如果你只是使用谷歌地圖的iframe嵌入，你可以通過簡單地增加給你的CSS（假設你不使用任何其他的I幀使其響應：

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

如果你的容器/主題爲響應此

來源

2013-01-10 20:55:38 matt

你不希望max-width @matt建議，但他在正確的軌道上。流體列設置相對大小谷歌已經在框架中設置大小，你想覆蓋那就是你的網格允許的最大尺寸;你想要經常使用width。

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

我建議把它在一個名爲div和#gmap是比較合理的，雖然，

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

來源

2013-03-06 20:00:00

該解決方案完美地工作對我來說，放置一個div內的iframe的建議。 –

使用它。這個對我有用。希望這將解決您的問題的鏈接它也

<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>

來源

2013-10-21 08:28:37

請編輯您的答案並將代碼格式化以使其易讀 – kleopatra

這就是mate！謝謝 – Dakatine

Bootstrap：使用具有固定和響應式佈局的Google地圖

回答

相關問題