Twitter Bootstrap CSS ảnh hưởng đến Google Maps

Tôi đang sử dụng Twitter Bootstrap và có bản đồ Google.

Hình ảnh trên bản đồ, chẳng hạn như điểm đánh dấu đang bị CSS xiên trong Bootstrap.

Trong CSS Bootstrap có:

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

Khi tôi vô hiệu hóa thuộc max-widthtính bằng Fireorms, hình ảnh đánh dấu sẽ xuất hiện như bình thường. Làm cách nào tôi có thể ngăn CSS Bootstrap ảnh hưởng đến hình ảnh bản đồ của Google?

Với Bootstrap 2.0, điều này dường như thực hiện thủ thuật:

#mapCanvas img {
  max-width: none;
}

Ngoài ra còn có một vấn đề với bộ chọn thả xuống cho địa hình và lớp phủ, thêm cả hai thứ này sẽ khắc phục vấn đề ...

#mapCanvas img { 
  max-width: none;
}

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

Kiểu thứ hai sẽ sắp xếp các vấn đề khác với hộp địa hình và lớp phủ trong một số trình duyệt.

Cung cấp cho bản đồ vải của bạn một id của map_canvas.

Cam kết bootstrap này bao gồm max-width: nonesửa lỗi cho id map_canvas(nhưng nó sẽ không hoạt động mapCanvas).

Không có câu trả lời nào trong số này làm việc cho tôi, vì vậy tôi đã tìm đến div của mình và nhìn vào những đứa con của nó, tôi thấy một div mới với lớp "gm-style", vì vậy tôi đã đưa nó vào CSS của mình:

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

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

.. và điều đó đã giải quyết vấn đề cho tôi.

Bạn muốn vượt quá quy tắc độ rộng tối đa trong phần CSS bằng cách sử dụng độ rộng tối đa: none; Đây có vẻ là cách xung quanh vấn đề này

Thay đổi #MapCanvas không hoạt động đối với chúng tôi bằng cách sử dụng đá quý gmap4rails, nhưng đã làm khi chúng tôi thay đổi thành

.map_container img {
    max-width: none;
}

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

Tôi đang sử dụng gmaps4rails, bản sửa lỗi này đã giúp tôi:

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

twitter bootstrap 2.0.4 mới nhất bao gồm sửa lỗi này trực tiếp.

Nếu bạn đang gói nội dung của mình trong một (div class = "container") như trong trang demo của twitter bootstrap, bạn nên thêm một style = "height: 100%"

Ngoài ra còn có một vấn đề với việc in bản đồ bằng cách sử dụng In trong bất kỳ trình duyệt nào. Các img { max-width: 100% !important; }sẽ không được cố định bởi đoạn code trên: bạn cần phải thêm một !importanttuyên bố như sau:

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

Tôi cũng phải tắt bóng hộp và vì thứ tự bao gồm, tôi đã thêm cờ quan trọng!

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

Tất cả các câu trả lời đều là max-widht: none

đối với tôi, max-height: kế thừa đã làm việc .....

Mọi người đang sử dụng #map, #map_canvas, v.v. Hãy nhìn vào div cha của bạn. Nếu nó màu xanh, thì nó sẽ là #blue img {}