3

Google マップを Boostrap レイアウト内に配置しようとしています。従来の Web ページでは固定幅を使用し、モバイル デバイスで表示する場合はレスポンシブ レイアウトを使用します。

Google マップが Bootstrap のレイアウトと利用可能な修正でどのように問題を引き起こすかを読みました。いくつかのサイトで修正プログラムとしてリストされている次のコード スニペットを使用しました。

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

これは固定レイアウトでは機能しますが、モバイル デバイスで表示すると反応が鈍くなります。

Bootstrap を使用しながら、これらの両方の目標を達成する方法はありますか? 共有された洞察や経験は大歓迎です。

4

4 に答える 4

5

@mattが示唆したようにはなりませんmax-widthが、彼は正しい軌道に乗っています. 流体列は相対的なサイズを設定します。Google は既にフレーム内のサイズを設定しています。それをオーバーライドして、グリッドが許可する最大サイズにします。レギュラーでお願いしますwidth。

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

私はそれをdivcalledに入れ#gmap、より合理的にすることをお勧めしますが、

#gmap iframe, #gmap object, #gmap embed { width: 100%; }
于 2013-03-06T20:00:00.140 に答える
0

実際、Google マップの IFRAME 埋め込みを使用しているだけの場合は、これを CSS に追加するだけでレスポンシブにすることができます (他の iframe を使用していないと仮定すると:

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

コンテナー/テーマがレスポンシブである場合、これはうまく機能します。

于 2013-01-10T20:55:38.770 に答える
0

http://ansciath.tumblr.com/post/7347495869/css-aspect-ratioで説明されている手法はうまく機能します。

そこにある例の「テキスト」を Google マップ コードに置き換えるだけです。

于 2012-06-28T12:42:24.537 に答える