Twitter Bootstrap CSS влияет на Google Maps

Question

Я использую Twitter Bootstrap, и у меня есть карта Google.

Изображения на карте, такие как маркер, перемещаются с помощью CSS в Bootstrap.

В Bootstrap CSS есть:

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

Когда я отключаю max-width При использовании Firebug, маркер изображения отображается как обычно. Как я могу предотвратить влияние Bootstrap CSS на изображения карт Google?

Answer 1

С Bootstrap 2.0 это, похоже, помогло:

#mapCanvas img {
  max-width: none;
}

Answer 2

Существует также проблема с выпадающими селекторами для ландшафта и оверлеев, добавление обоих из них устранит проблемы...

#mapCanvas img { 
  max-width: none;
}

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

Второй стиль будет иметь некоторые другие проблемы с рамкой ландшафта и наложения в некоторых браузерах.

Answer 3

Дайте вашей карте холст div идентификатор map_canvas,

Этот загрузочный коммит включает в себя max-width: none исправить для идентификатора map_canvas (но это не сработает для mapCanvas).

Answer 4

Ни один из этих ответов не сработал для меня, поэтому я вошел в свой div и посмотрел на его детей, я увидел новый div с классом "gm-style", поэтому я поместил это в свой CSS:

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

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

..и это решило проблему для меня.

Answer 5

Вы хотите переопределить правило максимальной ширины в разделе CSS с помощью max-width: none; Похоже, что это способ обойти эту проблему

Answer 6

Я использую gmaps4rails, это исправление сделало это для меня:

.gmaps4rails_map img {
    max-width: none;
}
.gmaps4rails_map label {
    width: auto; display:inline;
}

Answer 7

Изменение #MapCanvas у нас не сработало с использованием гема gmap4rails, но сработало, когда мы перешли на

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}

Answer 8

Существует также проблема с печатью карт с использованием Print в любом браузере. img { max-width: 100% !important; } не будет исправлено приведенным выше кодом: вам нужно добавить !important декларация вроде так:

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

Answer 9

Последняя версия Twitter начальной загрузки 2.0.4 включает это исправление напрямую.

Если вы помещаете содержимое в a (div class="container"), как на демонстрационной странице начальной загрузки Twitter, вы должны добавить style="height: 100%"

Answer 10

Все ответы были max-widht: нет

для меня max-height: Наследовать работал.....

Люди используют #map, #map_canvas и т. Д. Посмотрите на ваш родительский div. Если он синий, то это будет #blue img { }

Answer 11

Мне также пришлось отключить box-shadow, и из-за порядка моих включений я добавил флаг! Важный.

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