web-dev-qa-db-fra.com

Twitter Bootstrap CSS affectant Google Maps

J'utilise Twitter Bootstrap et j'ai une carte Google.

Les images sur la carte, telles que les marqueurs, sont biaisées par le CSS dans Bootstrap.

Dans le Bootstrap CSS, il y a:

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

Quand je désactive le max-width _ propriété utilisant Firebug, l’image de marqueur apparaît normalement. Comment empêcher le CSS Bootstrap CSS) d’affecter les images de Google Maps?

google-mapstwitter-bootstrapcss
147
raklos

Avec Bootstrap 2.0, cela semblait faire l'affaire:

#mapCanvas img {
  max-width: none;
}
187
kevinwmerritt

Il y a aussi un problème avec les sélecteurs déroulants pour le terrain et les superpositions, leur ajout corrigera les problèmes ...

#mapCanvas img { 
  max-width: none;
}

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

Le second style résoudra d’autres problèmes liés au terrain et à la zone de superposition dans certains navigateurs.

80
nodrog

Donnez à votre div de canevas un identifiant de map_canvas.

This bootstrap commit inclut le max-width: none correctif pour l'identifiant map_canvas _ (mais cela ne fonctionnera pas pour mapCanvas).

20
robd

Aucune de ces réponses n'a fonctionné pour moi, alors je suis allé voir ma div et j'ai regardé ses enfants. J'ai vu une nouvelle div avec la classe "gm-style", alors j'ai mis ceci dans mon CSS:

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

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

..et cela a résolu le problème pour moi.

11
Christopher Dow

Vous souhaitez remplacer la règle max-width dans la section CSS en utilisant max-width: none; Cela semble être la solution au problème

3
Pawpoint

Changer le #MapCanvas n’a pas fonctionné avec gmap4Rails gem, mais quand nous avons changé en

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}
2
Sam Joseph

J'utilise gmaps4Rails, ce correctif l'a fait pour moi:

.gmaps4Rails_map img {
    max-width: none;
}
.gmaps4Rails_map label {
    width: auto; display:inline;
}
2
Benjamin Crouzier

dernière Twitter bootstrap) 2.0.4 inclut directement ce correctif.

Si vous intégrez votre contenu dans le a (div class = "conteneur") comme dans la page de démonstration de Twitter Bootstrap, vous devez ajouter un style = "height: 100%"

1
redochka

Il existe également un problème d'impression de cartes utilisant Imprimer dans n'importe quel navigateur. Le img { max-width: 100% !important; } ne sera pas corrigé par le code ci-dessus: vous devez ajouter un !important déclaration comme suit:

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

Toutes les réponses étaient max-width: aucune

pour moi, max-height: hériter travaillé .....

Les gens utilisent #map, #map_canvas, etc. Regardez votre div parent. Si c'est bleu, alors ce sera #blue img {}

0
user2060451

J'ai également dû désactiver l'ombre de la boîte et, en raison de l'ordre de mes inclus, j'ai ajouté le drapeau! Important.

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