web-dev-qa-db-ja.com

Twitter Bootstrap Googleマップに影響するCSS

Twitter Bootstrapを使用していて、Googleマップを持っています。

マーカーなどのマップ上の画像は、BootstrapのCSSによって歪んでいます。

Bootstrap CSSには次のものがあります。

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
}

Firebugを使用してmax-widthプロパティを無効にすると、マーカー画像が通常どおり表示されます。 Bootstrap CSSがGoogleマップの画像に影響しないようにするにはどうすればよいですか？

google-mapstwitter-bootstrapcss
147
raklos

Bootstrap 2.0では、これでうまくいくようです。

#mapCanvas img {
  max-width: none;
}
187
kevinwmerritt

地形とオーバーレイのドロップダウンセレクターにも問題があり、これらを両方追加すると問題が修正されます...

#mapCanvas img { 
  max-width: none;
}

#mapCanvas label { 
  width: auto; display:inline; 
}

2番目のスタイルは、一部のブラウザーの地形およびオーバーレイボックスに関する他の問題を並べ替えます。

80
nodrog

マップキャンバスdivにmap_canvasのIDを付けます。

このbootstrap commit は、ID max-width: noneのmap_canvas修正を含みます（ただし、mapCanvasには機能しません）。

20
robd

これらの答えはどれも役に立たなかったので、divに行き、その子を見て、クラス「gm-style」の新しいdivを見たので、これをCSSに入れました：

.gm-style img {
    max-width: none;
  }

  .gm-style label {
    width: auto; display:inline;
  }

..そしてそれは私のために問題を解決しました。

11
Christopher Dow

Max-width：none;を使用して、CSSセクションのmax-widthルールをオーバーライドします。これがこの問題の回避方法のようです

3
Pawpoint

#MapCanvasの変更はgmap4Rails gemを使用して機能しませんでしたが、

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}
2
Sam Joseph

私はgmaps4Railsを使用していますが、この修正は私のためにそれをしました：

.gmaps4Rails_map img {
    max-width: none;
}
.gmaps4Rails_map label {
    width: auto; display:inline;
}
2
Benjamin Crouzier

最新のTwitter bootstrap 2.0.4には、この修正が直接含まれています。

Twitterブートストラップのデモページのようにa（div class = "container"）でコンテンツをラップする場合、style = "height：100％"を追加する必要があります。

1
redochka

また、任意のブラウザーで[印刷]を使用して地図を印刷する場合にも問題があります。 img { max-width: 100% !important; }は上記のコードでは修正されません：次のような!important宣言を追加する必要があります：

@media print {
  img {
    max-width: auto !important;
  }
}
1
tempranova

すべての答えはmax-width：noneでした

私にとっては、max-height：inheritが機能しました.....

人々は＃map、＃map_canvasなどを使用しています。親divを見てください。青い場合は、＃blue img {}

0
user2060451

また、ボックスシャドウをオフにする必要がありました。インクルードの順序のため、！importantフラグを追加しました。

#mapCanvas img {
    max-width: none !important;
    box-shadow: none !important;
}
0
Redtopia