Google Haritalar'ı etkileyen Twitter Bootstrap CSS'si

147

Twitter Bootstrap kullanıyorum ve bir Google haritam var.

Harita üzerindeki işaretçi gibi görüntüler Bootstrap'teki CSS tarafından eğiliyor.

Bootstrap CSS'de şunlar bulunur:

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

max-widthÖzelliği Firebug kullanarak devre dışı bıraktığımda , işaretçi görüntüsü normal görünüyor. Bootstrap CSS'nin Google harita resimlerini etkilemesini nasıl engelleyebilirim?

google-maps twitter-bootstrap css

— Raklos
kaynak

burada cevapla: github.com/zurb/foundation/issues/26

— raklos

187

Bootstrap 2.0 ile, bu hile yapıyor gibiydi:

#mapCanvas img {
  max-width: none;
}

— Kevinwmerritt
kaynak

6

#mapCanvas img { width: auto; display:inline; }Aşağıda @nodrog tarafından belirtildiği gibi eklediğinizden emin olun

— jlb

Bootstrap 2.0.3 sürüm notlarından: "Duyarlı görsellerdeki gerileme 2.0.1 itibarıyla düzeltildi. Varsayılan olarak maksimum genişlik:% 100; görüntülere yeniden ekledik. Arkadaşlarımız olduğu için onu son sürümümüzde kaldırdık Google Haritalar entegrasyonu ve diğer projelerden şikayetçiyiz, ancak şimdi bu konularda farklı bir duruş sergiliyoruz ve geliştiricilerin bu ince ayarları kendi başlarına yapmalarını gerektireceğiz. "

— kevinwmerritt

Bilginize: Bootstrap 2.0.4 sürüm notları: "Maksimum genişliği önlemek için özel CSS eklendi:% 100; görüntülerde Google Haritalar'ın işlenmesini bozmasını engelliyor."

— kevinwmerritt

Yani nihayet kod gömmek id karar verdik tuhaf, değil kullanım sınıfı yerine

— zerkms

1

#mapCanvas benim için çalışmadı. Sadece google maps kapsayıcı olarak kullandığım .map sınıfımı kullandım ve hile yaptı. TEŞEKKÜRLER!

— Fydo

80

Arazi ve bindirmeler için açılır seçicilerde de bir sorun var, bunların her ikisinin de eklenmesi sorunları çözecektir ...

#mapCanvas img { 
  max-width: none;
}

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

İkinci stil, bazı tarayıcılarda arazi ve yer paylaşımı kutusu ile ilgili diğer sorunları çözecektir.

— nodrog
kaynak

Evet ! yukarıda "kabul edildi" olarak işaretlenen yanıtla birlikte her şey sabit görünüyor. Teşekkürler.

— Mat

firefox 17'de bir cazibe gibi çalışıyor ancak krom 23'te değil. nedenini bilmiyorum ama çözümü buldum sadece şunu ekleyin:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

— yosafatade

Sen bir dahisin. Çok teşekkürler. Bu beni deli ediyor :-)

— Bear

20

Harita tuvalinize bir kimlik verin map_canvas.

Bu bootstrap commitmax-width: none , id için düzeltmeyi içerir map_canvas(ancak bunun için çalışmaz mapCanvas).

— Robd
kaynak

V2.2.2'de sadece kimliği değiştirmenin gerekli olduğunu düşünüyorum

— jacktrades

i css dosyasında böyle id bulamıyorum

— Muhaimin

@robd: Sadece merak için, map_canvas dışında neden çalışmıyor?

— ArunRaj

@ArunRaj çünkü önyüklemedeki düzeltme #map_canvas kimliğine kodlanmıştır (bağlantılı işleme bakın). Her halükarda, bu cevap neredeyse 2 yaşında olduğu için muhtemelen güncel değil.

— 2014

11

Bu yanıtların hiçbiri benim için işe yaramadı, bu yüzden div'e gittim ve çocuklarına baktım "gm-style" sınıfına sahip yeni bir div gördüm, bu yüzden bunu CSS'ime koydum:

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

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

..ve bu benim için sorunu çözdü.

— Christopher Dow
kaynak

+1 Bu, garip "yakınlaştırma" kontrollerini düzeltmek için benim için çalışan tek yanıttır. (Bootstrap 2)

— philfreo

Benim için de çalıştı. İyi tespit :)

— jeje

Teşekkürler, benim için de çalıştı. Garip "yakınlaştırma" kontrollerini düzeltmek için benim için çalışan tek cevap. (Temel 5 ile)

— Steffi

3

Max-width: none kullanarak CSS bölümündeki maksimum genişlik kuralını aşmak istiyorsunuz; Bu, bu sorunun etrafından dolaşmanın yolu gibi görünüyor

— Pawpoint
kaynak

2

#MapCanvas'ı değiştirmek bizim için gmap4rails gem kullanarak işe yaramadı, ancak değiştirdiğimizde yaptı

.map_container img {
    max-width: none;
}

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

— Sam Joseph
kaynak

2

Gmaps4rails kullanıyorum, bu düzeltme benim için yaptı:

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

— Benjamin Crouzier
kaynak

1

en son twitter bootstrap 2.0.4 bu düzeltmeyi doğrudan içerir.

İçeriğinizi twitter bootstrap demo sayfasında olduğu gibi a (div class = "container") içine sarıyorsanız, bir style = "height: 100%" eklemelisiniz

— Redochka
kaynak

1

Herhangi bir tarayıcıda Yazdır'ı kullanarak haritaları yazdırmada da bir sorun vardır. img { max-width: 100% !important; }: Yukarıdaki kod tarafından sabit olmayacak bir eklemem gerekiyor !importantşöyle beyanı:

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

— Tempranova
kaynak

0

Ayrıca kutu gölgesini kapatmak zorunda kaldım ve içerme sıralarım nedeniyle önemli bayrağı ekledim.

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

— Redtopia
kaynak

1

Bu benim için çalıştı. Birine olumsuz oy vereceksen, en azından nedenini söylemelisin.

— Redtopia

0

Tüm cevaplar max-widht idi: yok

benim için maksimum yükseklik: miras çalıştı .....

İnsanlar #map, #map_canvas vb. Kullanıyor. Üst div'inize bakın. Maviyse, #blue img olacaktır {}

— kullanıcı2060451
kaynak