ट्विटर बूटस्ट्रैप सीएसएस गूगल मैप्स को प्रभावित करता है

Question

मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, और एक Google मानचित्र है।

नक्शे पर चित्र, जैसे मार्कर को बूटस्ट्रैप में सीएसएस द्वारा तिरछा किया जा रहा है।

बूटस्ट्रैप सीएसएस में है:

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

जब मैं max-widthफायरबग का उपयोग करके संपत्ति को अक्षम करता हूं , तो मार्कर छवि सामान्य रूप में दिखाई देती है। मैं Google मानचित्र छवियों को प्रभावित करने से बूटस्ट्रैप सीएसएस को कैसे रोक सकता हूं?

Comments

यहाँ उत्तर दें: github.com/zurb/foundation/issues/26

— raklos

Answer 1

बूटस्ट्रैप 2.0 के साथ, यह चाल करने के लिए लग रहा था:

#mapCanvas img {
  max-width: none;
}

Comments

यकीन है कि जोड़ने के लिए, #mapCanvas img { width: auto; display:inline; }के रूप में @nodrog से नीचे उल्लेख

— JLB

बूटस्ट्रैप 2.0.3 रिलीज नोटों से: "उत्तरदायी छवियों में फिक्स्ड प्रतिगमन 2.0.1 के रूप में समर्थन करता है। हमने डिफ़ॉल्ट रूप से छवियों के लिए अधिकतम-चौड़ाई: 100% जोड़ा है। हमने अपने पिछले रिलीज में इसे हटा दिया था क्योंकि हमारे पास लोग थे। Google मानचित्र एकीकरण और अन्य परियोजनाओं के बारे में शिकायत करना, लेकिन हम इन चीजों पर अब एक अलग रुख अपना रहे हैं और डेवलपर्स को अपने अंत में ये मोड़ बनाने की आवश्यकता होगी। "

— केविनविमरिट

FYI करें: बूटस्ट्रैप 2.0.4 रिलीज नोट: "गूगल मैप्स रेंडरिंग को गड़बड़ाने से छवियों पर अधिकतम चौड़ाई को रोकने के लिए विशेष सीएसएस जोड़ा गया: 100%।"

— केविनविमरिट

यही कारण है कि अजीब बात है कि वे अंत में hardcode आईडी का फैसला किया है, नहीं उपयोग वर्ग के बजाय

— zerkms

#mapCanvas ने मेरे लिए काम नहीं किया। मैं सिर्फ अपने .map वर्ग का उपयोग करता था जिसे मैंने गूगल मैप्स कंटेनर के रूप में इस्तेमाल किया था और इसने चाल चली। धन्यवाद!

— 2

Answer 2

इलाके और ओवरले के लिए ड्रॉपडाउन चयनकर्ताओं के साथ भी एक मुद्दा है, इन दोनों को जोड़ने से मुद्दे ठीक हो जाएंगे ...

#mapCanvas img { 
  max-width: none;
}

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

दूसरी शैली कुछ ब्राउज़रों में इलाके और ओवरले बॉक्स के साथ अन्य मुद्दों को हल करेगी।

Comments

हाँ ! सब कुछ इस के साथ तय हो गया लगता है कि उत्तर के साथ संयुक्त रूप से चिह्नित किया गया "उपरोक्त"। धन्यवाद।

— मैट

फ़ायरफ़ॉक्स 17 में एक आकर्षण की तरह काम करता है, लेकिन क्रोम 23 में नहीं। न जाने क्यों, लेकिन मुझे लगता है कि समाधान सिर्फ यह मिला:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

— yosafatade

आप एक प्रतिभाशाली हैं। बहुत बहुत धन्यवाद। यह मुझे पागल बना रहा था :-)

— भालू

Answer 3

अपना नक्शा कैनवास div की एक आईडी दें map_canvas।

इस बूटस्ट्रैप कमिट में max-width: noneआईडी के लिए फिक्स शामिल है map_canvas(लेकिन यह काम नहीं करेगा mapCanvas)।

Comments

मुझे लगता है कि केवल आईडी बदलने के लिए v2.2.2 में आवश्यक है

— jacktrades 20

मुझे ऐसी कोई फ़ाइल css फ़ाइल में नहीं मिली है

— Muhaimin

@robd: बस जिज्ञासु के लिए, क्यों यह map_canvas को छोड़कर काम नहीं करेगा।

— अरुणराज

@ArunRaj क्योंकि बूटस्ट्रैप में फिक्स #map_canvas id (लिंक की गई कमिटमेंट देखें) को हार्डकोड किया गया है। किसी भी स्थिति में, यह उत्तर संभवतः पुराना है, क्योंकि यह लगभग 2 वर्ष पुराना है।

— रॉन्ग

Answer 4

इन उत्तरों में से किसी ने भी मेरे लिए काम नहीं किया, इसलिए मैं अपनी डिव में गया और उसके बच्चों को देखा, मैंने कक्षा "जीएम-स्टाइल" के साथ एक नया डिव देखा, इसलिए मैंने इसे अपने सीएसएस में रखा:

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

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

..और जो मेरे लिए समस्या का हल है।

Comments

+1 यह एकमात्र उत्तर है जिसने मेरे लिए अजीब "ज़ूम" नियंत्रण को ठीक करने के लिए काम किया। (बूटस्ट्रैप 2)

— फिल्पेरो

मेरे लिए भी काम किया। अच्छी स्पॉटिंग :)

— jeje

धन्यवाद, मेरे लिए भी काम किया। एकमात्र उत्तर जिसने मेरे लिए अजीब "ज़ूम" नियंत्रण को ठीक करने के लिए काम किया। (फाउंडेशन 5 के साथ)

— स्टेफी

Answer 5

आप सीएसएस अनुभाग में अधिकतम-चौड़ाई का उपयोग करके अधिकतम-चौड़ाई नियम को ओवर-राइड करना चाहते हैं: कोई नहीं; यह इस समस्या के आसपास का रास्ता लगता है

Answer 6

#MapCanvas को बदलना हमारे लिए gmap4rails रत्न का उपयोग करने के लिए काम नहीं किया, लेकिन जब हम बदल गए

.map_container img {
    max-width: none;
}

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

Answer 7

मैं gmaps4rails का उपयोग कर रहा हूं, इस फिक्स ने मेरे लिए यह किया:

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

Answer 8

नवीनतम ट्विटर बूटस्ट्रैप 2.0.4 में यह फिक्स सीधे शामिल है।

यदि आप ट्विटर बूटस्ट्रैप के डेमो पेज में (div class = "कंटेनर") में अपनी सामग्री लपेट रहे हैं, तो आपको एक शैली जोड़ना चाहिए = "ऊँचाई: 100%"

Answer 9

किसी भी ब्राउज़र में प्रिंट का उपयोग करते हुए नक्शे के मुद्रण के साथ एक समस्या भी है। img { max-width: 100% !important; }: उपरोक्त कोड द्वारा निर्धारित नहीं की जाएगी आप एक जोड़ने की जरूरत है !importantताकि जैसे घोषणा:

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

Answer 10

मुझे बॉक्स-शैडो को भी बंद करना पड़ा, और मेरे शामिल होने के आदेश के कारण, मैंने महत्वपूर्ण ध्वज जोड़ा।

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

Comments

इसने मेरे लिए काम किया। यदि आप किसी को वोट देने जा रहे हैं, तो आपको कम से कम ऐसा क्यों कहना चाहिए।

— Redtopia

Answer 11

सभी उत्तर अधिकतम-विधमान थे: कोई नहीं

मेरे लिए, अधिकतम ऊंचाई: विरासत में काम किया .....

लोग #map, #map_canvas इत्यादि का उपयोग कर रहे हैं, अपने माता-पिता को देखें। अगर यह नीला है, तो यह #blue img {} होगा