Twitter Bootstrap CSS, що впливає на Карти Google

147

Я використовую Twitter Bootstrap і маю карту Google.

Образи на карті, такі як маркер, перекошуються CSS у Bootstrap.

У CSS Bootstrap є:

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

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

google-maps twitter-bootstrap css

— раклос
джерело

відповідь тут: github.com/zurb/foundation/isissue/26

— raklos

187

З Bootstrap 2.0 це, здавалося, зробило трюк:

#mapCanvas img {
  max-width: none;
}

— kevinwmerritt
джерело

6

Обов’язково додайте, #mapCanvas img { width: auto; display:inline; }як згадувалося нижче, @nodrog

— jlb

З приміток до випуску Bootstrap 2.0.3: "Виправлена регресія у підтримці чутливих зображень станом на 2.0.1. Ми знову додали максимальну ширину: 100%; до зображень за замовчуванням. Ми видалили її в останньому випуску, оскільки у нас були люди скаржимось на інтеграцію Google Maps та інші проекти, але ми зараз займаємо іншу позицію щодо цих речей і вимагатимемо від розробників зробити ці зміни в їх кінці ".

— kevinwmerritt

FYI: Примітки до випуску Bootstrap 2.0.4: "Додано спеціальний CSS для запобігання максимальної ширини: 100%; для зображень, які переплутають перегляд Google Maps".

— kevinwmerritt

Дивно, що вони нарешті вирішили ввести

— жорсткий код

1

#mapCanvas не працював для мене. Я просто використав свій .map клас, який я використовував як контейнер Google Maps, і він зробив свою справу. ДЯКУЮ!

— Фідо

80

Існує також проблема із випадаючими селекторами для рельєфу місцевості та перекриттів, додавши і те, і це виправить проблеми ...

#mapCanvas img { 
  max-width: none;
}

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

Другий стиль буде вирішувати інші проблеми з місцевістю та полем накладання в деяких браузерах.

— ніздрю
джерело

Так ! все здається виправленим у цьому поєднанні з відповіддю, позначеним як "прийнято" вище. Дякую.

— Мат

працює як шарм у Firefox 17, але не в хромі 23. Не знаю, чому, але я знайшов рішення просто додати це:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

— yosafatade

Ви геній. Дуже дякую. Це зводило мене з розуму :-)

— Ведмідь

20

Введіть ідентифікатор свого полотна на карту map_canvas;

Цей компілятор завантаження включає max-width: noneвиправлення ідентифікатора map_canvas(але він не працюватиме mapCanvas).

— ограблений
джерело

Я думаю, що лише змінювати ідентифікатор потрібно в v2.2.2

— jacktrades

я не можу знайти такий ідентифікатор у файлі css

— Muhaimin

@robd: Просто для цікавих, чому це не буде працювати, крім map_canvas.

— ArunRaj

@ArunRaj, тому що виправлення в завантажувальному файлі жорстко кодується до ідентифікатора #map_canvas (див. Пов'язані коміти). У будь-якому випадку ця відповідь, мабуть, застаріла зараз, враховуючи, що їй майже 2 роки.

— пограбовано

11

Жодна з цих відповідей не працювала для мене, тому я зайшов до свого діва і подивився на його дітей, я побачив новий дів із класом "gm-style", тому я помістив це у свій CSS:

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

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

..і це вирішило проблему для мене.

— Крістофер Доу
джерело

+1 - це єдина відповідь, яка допомогла мені виправити дивні елементи "збільшення". (Bootstrap 2)

— philfreo

Працював і для мене. Хороші плямистість :)

— jeje

Дякую, працювали і для мене. Єдина відповідь, яка працювала для мене, щоб виправити дивні елементи "збільшення". (з Фондом 5)

— Стеффі

3

Ви хочете перевиконати правило про максимальну ширину в розділі CSS, використовуючи max-width: none; Це, мабуть, обхід цієї проблеми

— Точка лапи
джерело

2

Зміна #MapCanvas не працювала для нас, використовуючи gmap4rails gem, але це відбулося, коли ми перейшли на

.map_container img {
    max-width: none;
}

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

— Сем Йосиф
джерело

2

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

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

— Бенджамін Крузьє
джерело

1

остання версія twitter bootstrap 2.0.4 включає це виправлення безпосередньо.

Якщо ви загортаєте вміст у (div class = "контейнер"), як на демонстраційній сторінці twitter bootstrap, вам слід додати style = "height: 100%"

— ревочка
джерело

1

Існує також проблема з друком карт за допомогою друку в будь-якому браузері. Код img { max-width: 100% !important; }не буде фіксовано вище: вам потрібно додати !importantдекларацію так:

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

— темпранова
джерело

0

Я також повинен був вимкнути тінь, і через порядок мого включення я додав важливий прапор!

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

— Редтопія
джерело

1

Це працювало для мене. Якщо ти будеш голосувати за когось, ти повинен хоча б сказати, чому.

— Редтопія

0

Усі відповіді були максимальними: немає

для мене, max-height: успадковувати працював .....

Люди використовують #map, #map_canvas тощо. Подивіться на батьківського діла. Якщо він синій, то це буде #blue img {}

— user2060451
джерело