2013-04-17 7 views
6

मैंने ज़र्ब फाउंडेशन 3 का उपयोग करने का प्रयास किया है। लेकिन Google मानचित्र के साथ कुछ समस्या है। जबकि मैं Google मानचित्र का उपयोग करता हूं, कॉलम उत्तरदायी नहीं होना चाहते थे।ज़र्ब फाउंडेशन में उत्तरदायी Google मानचित्र कैसे बनाएं

<div class="row"> 
<div class="six columns">short description</div> 
<div class="six columns"><iframe>GOOGLE MAPS CODE</iframe></div> 
</div> 

कोई भी मेरी मदद कर सकता है, कृपया।

धन्यवाद

+0

Zurb F6 में - उत्तरदायी एम्बेड का उपयोग करें: http://foundation.zurb.com/sites/docs/responsive-embed.html – iamrobert

उत्तर

1

आप आईडी map_canvas साथ एक तत्व में नक्शा संलग्न करने की आवश्यकता होगी।

<div class="row"> 
    <div class="six columns">short description</div> 
    <div class="six columns"> 
     <div id="map_canvas" ><iframe>GOOGLE MAPS CODE</iframe></div> 
    </div> 
</div> 
+0

हां, तो हम स्वयं मीडिया क्वेरी बनाने की जरूरत है, है ना ??? – user2272831

+0

नहीं, यह F3 में अंतर्निहित है। यदि आप जाते हैं और 'foundation.css' में चेक करते हैं तो आपको कुछ जगहों पर वह कक्षा मिल जाएगी। –

+0

yeaps, मुझे कोड मिला [#map_canvas एम्बेड {अधिकतम-चौड़ाई: कोई नहीं; }] लेकिन आपका सुझाव काम नहीं किया। ??? – user2272831

4

मैंने ज़र्ब फाउंडेशन के साथ Google मानचित्र का उपयोग किया और यह मेरे लिए काम कर रहा था। और मैंने iframes का उपयोग नहीं किया।

<div id="map_canvas" class="six columns" style="height: 800px"></div> 

<div class="six columns" style="height: 800px"></div> 
+0

लेकिन यह मेरे लिए काम नहीं करता है, आकार समान उत्तरदायी नहीं है। क्या मैं आपकी वेबसाइट देख सकता हूं जो आपकी उपर्युक्त विधि का उपयोग करे? धन्यवाद – user2272831

9

<div class="flex-video"> </div> 

http://foundation.zurb.com/docs/components/flex-video.html

में यह लपेटकर आप यूट्यूब, Vimeo, या किसी अन्य साइट iframe, embed या> वस्तु तत्वों का उपयोग करता है से वीडियो एम्बेड कर रहे हैं की कोशिश, आप div.flex-video ## शीर्षक ## में अपने वीडियो को एक आंतरिक अनुपात बनाने के लिए लपेट सकते हैं जो> किसी भी डिवाइस पर आपके वीडियो को उचित रूप से स्केल करेगा।

+0

यह समाधान भी ठीक काम करता है जब iframes – jdiaz

+0

के बिना उपयोग किया जाता है यह स्वीकार्य उत्तर होना चाहिए! –

0

"फ्लेक्स वीडियो" कक्षा अब तक ऐसा करने का सबसे अच्छा तरीका है हालांकि यह एक div के नीचे एक प्रमुख पैडिंग जोड़ता है। तो यह छः में से एक दर्जन दर्जन है।

0

बस शैली = "अधिकतम चौड़ाई: 100%;" जोड़ें अपने आईफ्रेम कोड के लिए। जब तक आईफ्रेम फाउंडेशन के कॉलम में से एक के अंदर है, तो यह फिट करने के लिए स्केल करेगा। ध्यान दें कि यह फाउंडेशन 3 के साथ परीक्षण किया गया है, 4 या 5 नहीं। हालांकि, यह उन लोगों के लिए भी काम करना चाहिए।

1

समस्या अक्सर उस प्रतिशत काम नहीं करता है, जब मैं

<div id="map_canvas" style="height: 400px;"></div> 

को

<div id="map_canvas" style="height: 40%;"></div> 

से ठीक किया यह ठीक काम किया।

संबंधित मुद्दे