[google-maps] التغريد Bootstrap CSS يؤثر على خرائط جوجل


4 Answers

هناك أيضًا مشكلة في محددات القائمة المنسدلة للتضاريس والتراكبات ، وسيؤدي كلاهما إلى إصلاح المشكلات ...

#mapCanvas img { 
  max-width: none;
}

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

النمط الثاني سيؤدي إلى حل مشكلات أخرى مع مربع التضاريس والتراكب في بعض المتصفحات.

Question

أنا أستخدم Twitter Bootstrap ، ولدي خريطة Google.

يتم تشويه الصور الموجودة على الخريطة ، مثل العلامة ، بواسطة CSS في Bootstrap.

في Bootstrap CSS يوجد:

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

عند تعطيل خاصية max-width باستخدام Firebug ، تظهر صورة العلامة كالمعتاد. كيف يمكنني منع Bootstrap CSS من التأثير على صور خرائط Google؟




لم تنجح أي من هذه الإجابات بالنسبة لي ، فدخلت إلى القسم الخاص بي ونظرت إلى أطفالها. رأيت قسمًا جديدًا مع "gm-class" ، لذلك وضعت هذا في CSS الخاص بي:

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

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

.. و التي تحل المشكلة بالنسبة لي.




أحدث bootstrap تويتر 2.0.4 يتضمن هذا الإصلاح مباشرة.

إذا كنت تقوم بتغليف المحتوى الخاص بك في (div class = "container") كما في صفحة العرض التوضيحي لـ bootstrap twitter ، فيجب إضافة نمط = "height: 100٪"




واضطررت أيضاً إلى إيقاف ظلال ظبطتي ، وبسبب ترتيب مكاني ، أضفت العلم الهام.

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



تغيير #MapCanvas لم يعمل بالنسبة لنا باستخدام gmap4rails جوهرة ، ولكن عندما قمنا بتغيير

.map_container img {
    max-width: none;
}

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



Related