Twitter Bootstrap CSS wpływa na Mapy Google

147

Używam Twitter Bootstrap i mam mapę Google.

Obrazy na mapie, takie jak znacznik, są wypaczane przez CSS w Bootstrap.

W Bootstrap CSS jest:

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

Kiedy wyłączam max-widthwłaściwość za pomocą Firebuga, obraz znacznika pojawia się normalnie. Jak mogę zapobiec wpływowi kodu CSS Bootstrap na obrazy map Google?

google-maps twitter-bootstrap css

— raklos
źródło

odpowiedz tutaj: github.com/zurb/foundation/issues/26

— raklos

187

W przypadku Bootstrap 2.0 wydawało się, że to działa:

#mapCanvas img {
  max-width: none;
}

— kevinwmerritt
źródło

6

Pamiętaj, aby dodać, #mapCanvas img { width: auto; display:inline; }jak wspomniano poniżej przez @nodrog

— jlb

Z informacji o wydaniu Bootstrap 2.0.3: „Naprawiono regresję w obsłudze responsywnych obrazów od wersji 2.0.1. Ponownie dodaliśmy max-width: 100%; do obrazów domyślnie. Usunęliśmy ją w naszej ostatniej wersji, odkąd mieliśmy ludzi narzekamy na integrację z Mapami Google i innymi projektami, ale zajmujemy teraz inne stanowisko w tej sprawie i będziemy wymagać od programistów wprowadzenia tych poprawek po ich stronie ”.

— kevinwmerritt

FYI: Bootstrap 2.0.4 Release Notes: „Dodano specjalny CSS, aby zapobiec max-width: 100%; na obrazach przed zepsuciem renderowania Map Google.”

— kevinwmerritt

To dziwne, że w końcu zdecydowali się na hardcode id, zamiast używać class

— zerkms,

1

#mapCanvas nie działa dla mnie. Właśnie użyłem mojej klasy .map, której użyłem jako kontenera map Google i to załatwiło sprawę. DZIĘKI!

— Fydo

80

Występuje również problem z rozwijanymi selektorami terenu i nakładek, dodanie obu tych elementów rozwiąże problemy ...

#mapCanvas img { 
  max-width: none;
}

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

Drugi styl będzie dotyczył innych problemów z terenem i polem nakładki w niektórych przeglądarkach.

— nodrog
źródło

Tak ! wszystko wydaje się naprawione w połączeniu z odpowiedzią oznaczoną powyżej jako „zaakceptowano”. Dzięki.

— Mat

działa jak urok w firefox 17, ale nie w chrome 23. nie wiem dlaczego, ale znalazłem rozwiązanie, po prostu dodaj to:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

— yosafatade

Jesteś geniuszem. Dziękuję bardzo. To doprowadzało mnie do szaleństwa :-)

— Bear

20

Podaj identyfikator div kanwy mapy map_canvas.

To zatwierdzenie bootstrap zawiera max-width: nonepoprawkę dla id map_canvas(ale to nie zadziała mapCanvas).

— robd
źródło

Myślę, że tylko zmiana identyfikatora jest konieczna w wersji 2.2.2

— jacktrades

nie mogę znaleźć takiego identyfikatora w pliku css

— Muhaimin

@robd: Tylko dla ciekawskich, dlaczego to nie zadziała z wyjątkiem map_canvas.

— ArunRaj

@ArunRaj, ponieważ poprawka w bootstrapie jest zakodowana na stałe w id #map_canvas (zobacz powiązane zatwierdzenie). W każdym razie ta odpowiedź jest prawdopodobnie nieaktualna, biorąc pod uwagę, że ma prawie 2 lata.

— robd

11

Żadna z tych odpowiedzi nie działała dla mnie, więc poszedłem do mojego div i spojrzałem na jego elementy podrzędne. Zobaczyłem nowy div z klasą „gm-style”, więc umieściłem to w moim CSS:

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

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

.. i to rozwiązało problem za mnie.

— Christopher Dow
źródło

+1 to jedyna odpowiedź, która pomogła mi naprawić dziwne elementy sterujące „powiększaniem”. (Bootstrap 2)

— philfreo,

Dla mnie też zadziałało. Dobre spostrzeganie :)

— jeje

Dzięki, dla mnie też pracował. Jedyna odpowiedź, która działała w moim przypadku, aby naprawić dziwne elementy sterujące „zoomem”. (z Foundation 5)

— Steffi

3

Chcesz zastąpić regułę max-width w sekcji CSS, używając max-width: none; Wydaje się, że jest to sposób na obejście tego problemu

— Pawpoint
źródło

2

Zmiana #MapCanvas nie działała dla nas przy użyciu klejnotu gmap4rails, ale działała, gdy przeszliśmy na

.map_container img {
    max-width: none;
}

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

— Sam Joseph
źródło

2

Używam gmaps4rails, ta poprawka zrobiła to za mnie:

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

— Benjamin Crouzier
źródło

1

Najnowszy program bootstrap 2.0.4 na Twitterze zawiera tę poprawkę bezpośrednio.

Jeśli pakujesz zawartość w a (div class = "container"), jak na stronie demonstracyjnej programu twitter bootstrap, powinieneś dodać style = "height: 100%"

— redochka
źródło

1

Występuje również problem z drukowaniem map za pomocą funkcji Drukuj w dowolnej przeglądarce. Nie img { max-width: 100% !important; }zostanie to naprawione przez powyższy kod: musisz dodać !importantdeklarację w następujący sposób:

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

— tempranowa
źródło

0

Musiałem też wyłączyć box-shadow, a ze względu na kolejność moich włączeń dodałem flagę! Important.

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

— Redtopia
źródło

1

To zadziałało dla mnie. Jeśli masz zamiar głosować na odrzucenie, powinieneś przynajmniej powiedzieć dlaczego.

— Redtopia

0

Wszystkie odpowiedzi były maksymalne: brak

dla mnie max-height: dziedziczenie działało .....

Ludzie używają #map, #map_canvas itp. Spójrz na swój nadrzędny div. Jeśli jest niebieski, to będzie #blue img {}

— user2060451
źródło