Twitter Bootstrap CSS มีผลกับ Google Maps

147

ฉันใช้ Twitter Bootstrap และมีแผนที่ Google

รูปภาพบนแผนที่เช่นเครื่องหมายถูกเบ้โดย CSS ใน Bootstrap

ใน Bootstrap CSS มี:

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

เมื่อฉันปิดการใช้งานmax-widthคุณสมบัติโดยใช้ Firebug ภาพเครื่องหมายจะปรากฏขึ้นตามปกติ ฉันจะป้องกัน Bootstrap CSS ไม่ให้ส่งผลกระทบต่อรูปภาพ Google maps ได้อย่างไร

google-maps twitter-bootstrap css

— raklos
แหล่งที่มา

ตอบที่นี่: github.com/zurb/foundation/issues/26

— raklos

187

ด้วย Bootstrap 2.0 นี่ดูเหมือนจะเป็นการหลอกลวง:

#mapCanvas img {
  max-width: none;
}

— kevinwmerritt
แหล่งที่มา

6

ตรวจสอบให้แน่ใจว่าได้เพิ่ม#mapCanvas img { width: auto; display:inline; }ตามที่ระบุไว้ด้านล่างโดย @nodrog

— jlb

จากบันทึกประจำรุ่น Bootstrap 2.0.3: "แก้ไขการถดถอยในการตอบสนองต่อภาพรองรับ 2.0.1 เราได้เพิ่มความกว้างสูงสุดใหม่: 100% เป็นภาพโดยค่าเริ่มต้นเราลบออกในรุ่นล่าสุดเมื่อเรามีคน บ่นเกี่ยวกับการรวม Google Maps และโครงการอื่น ๆ แต่ตอนนี้เรากำลังดำเนินการกับจุดยืนที่แตกต่างกันในสิ่งเหล่านี้และจะต้องให้ผู้พัฒนาทำการปรับแต่งเหล่านี้เมื่อสิ้นสุด

— kevinwmerritt

FYI: บันทึกย่อประจำรุ่น Bootstrap 2.0.4: "เพิ่ม CSS พิเศษเพื่อป้องกันความกว้างสูงสุด: 100%; ในภาพจากการทำให้การแสดงผล Google แผนที่ยุ่งเหยิง"

— kevinwmerritt

น่าแปลกใจที่ในที่สุดพวกเขาตัดสินใจที่จะ hardcode id ไม่ใช้คลาสแทน

— zerkms

1

#mapCanvas ไม่ทำงานสำหรับฉัน ฉันเพิ่งใช้คลาส. map ของฉันที่ฉันใช้เป็นที่บรรจุแผนที่ของ Google และมันก็ใช้กลอุบาย ขอขอบคุณ!

— Fydo

80

นอกจากนี้ยังมีปัญหากับตัวเลือกแบบเลื่อนลงสำหรับภูมิประเทศและภาพซ้อนทับการเพิ่มทั้งสองอย่างนี้จะแก้ไขปัญหา ...

#mapCanvas img { 
  max-width: none;
}

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

รูปแบบที่สองจะเรียงลำดับของปัญหาอื่น ๆ เกี่ยวกับภูมิประเทศและกล่องซ้อนทับในเบราว์เซอร์บางประเภท

— nodrog
แหล่งที่มา

ใช่! ดูเหมือนว่าทุกอย่างจะถูกแก้ไขด้วยสิ่งนี้รวมกับคำตอบที่ตั้งค่าสถานะเป็น "ยอมรับ" ด้านบน ขอบคุณ

— จ้า

ทำงานเหมือนคาถาใน firefox 17 แต่ไม่ได้อยู่ใน chrome 23 ไม่รู้ว่าทำไม แต่ฉันพบวิธีแก้ปัญหาเพียงเพิ่มสิ่งนี้:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

— yosafatade

คุณคืออัจฉริยะ. ขอบคุณมาก ๆ. นี้ถูกขับรถฉันบ้า :-)

— หมี

20

ใส่รหัสประจำตัวของผืนผ้าใบของmap_canvasคุณ

บูตสแตรปนี้รวมถึงการmax-width: noneแก้ไขสำหรับ id map_canvas(แต่มันจะไม่ทำงานmapCanvas)

— robd
แหล่งที่มา

ฉันคิดว่าการเปลี่ยนรหัสเป็นสิ่งจำเป็นใน v2.2.2

— jacktrades

ฉันไม่พบรหัสดังกล่าวในไฟล์ css

— Muhaimin

@robd: แค่อยากรู้อยากเห็นทำไมมันใช้งานไม่ได้ยกเว้น map_canvas

— ArunRaj

@ArunRaj เนื่องจากการแก้ไขใน bootstrap นั้นฮาร์ดโค้ดเป็น #map_canvas id (ดูการกระทำที่เชื่อมโยง) ไม่ว่าในกรณีใดคำตอบนี้อาจล้าสมัยเนื่องจากมีอายุเกือบ 2 ปี

— robd

11

ไม่มีคำตอบใดที่เหมาะกับฉันดังนั้นฉันจึงไปที่ div ของฉันและดูลูก ๆ ของมันฉันเห็น div ใหม่พร้อมคลาส "gm-style" ดังนั้นฉันจึงใส่มันลงใน CSS:

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

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

.. และนั่นแก้ปัญหาให้ฉัน

— คริสโตเฟอร์ดาวโจนส์
แหล่งที่มา

+1 นี่เป็นคำตอบเดียวที่ทำให้ฉันแก้ไขการควบคุม "ซูม" แปลก ๆ (Bootstrap 2)

— philfreo

ทำงานให้ฉันด้วย Good spotting :)

— jeje

ขอบคุณทำงานให้ฉันด้วย คำตอบเดียวที่ทำงานกับฉันเพื่อแก้ไขตัวควบคุม "ซูม" แปลก ๆ (กับมูลนิธิ 5)

— Steffi

3

คุณต้องการข้ามกฎความกว้างสูงสุดในส่วน CSS โดยใช้ความกว้างสูงสุด: none; นี่น่าจะเป็นวิธีแก้ไขปัญหานี้

— Pawpoint
แหล่งที่มา

2

การเปลี่ยน #MapCanvas ไม่ทำงานสำหรับเราโดยใช้ gmap4rails gem แต่ทำเมื่อเราเปลี่ยนเป็น

.map_container img {
    max-width: none;
}

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

— แซมโจเซฟ
แหล่งที่มา

2

ฉันใช้ gmaps4rails การแก้ไขนี้ทำเพื่อฉัน:

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

— Benjamin Crouzier
แหล่งที่มา

1

ล่าสุด twitter bootstrap 2.0.4 รวมถึงการแก้ไขนี้โดยตรง

หากคุณกำลังห่อเนื้อหาของคุณใน a (div class = "container") เช่นเดียวกับในหน้าตัวอย่างของ twitter bootstrap คุณควรเพิ่ม style = "height: 100%"

— redochka
แหล่งที่มา

1

นอกจากนี้ยังมีปัญหากับการพิมพ์แผนที่โดยใช้การพิมพ์ในเบราว์เซอร์ใด ๆ img { max-width: 100% !important; }จะไม่ได้รับการแก้ไขโดยโค้ดข้างต้น: คุณจำเป็นต้องเพิ่ม!importantการประกาศเพื่อต้องการ:

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

— tempranova
แหล่งที่มา

0

ฉันต้องปิดกล่องเงาและด้วยลำดับของฉันฉันจึงเพิ่มธง!

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

— Redtopia
แหล่งที่มา

1

สิ่งนี้ใช้ได้สำหรับฉัน ถ้าคุณจะลงคะแนนใครบางคนอย่างน้อยคุณควรจะพูดว่าทำไม

— Redtopia

0

คำตอบทั้งหมดคือ max-widht: none

สำหรับฉันความสูงสูงสุด: สืบทอดทำงาน .....

ผู้คนกำลังใช้ #map, #map_canvas ฯลฯ ดู div หลักของคุณ ถ้าเป็นสีฟ้าก็จะเป็น #blue img {}

— user2060451
แหล่งที่มา