138 votos

Twitter Bootstrap CSS que afectan a Google Maps

Estoy usando Twitter Bootstrap y tener un mapa de Google.

Imágenes en el mapa, como marcador están siendo sesgados por la CSS en manos a la obra.

En el CSS de Bootstrap hay:

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

Cuando se desactiva el max-width propiedad usando Firebug, la imagen del marcador aparece como normal. ¿Cómo puedo evitar el CSS de Bootstrap de que afectan a las imágenes de mapas de Google?

183voto

kevinwmerritt Puntos 1948

Con botas 2.0, esto parecía hacer el truco:

#mapCanvas img {
  max-width: none;
}

79voto

nodrog Puntos 2564

También hay un problema con los selectores desplegables para terreno y superposiciones, sumando ambos arreglará los problemas...

#mapCanvas img { 
  max-width: none;
}

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

El segundo estilo será una especie de otros problemas con la caja de terreno y superposición en algunos navegadores.

19voto

robd Puntos 1337

Dar tu mapa lona div un id de map_canvas .

Esta confirmación arranque incluye el max-width: none arreglar para el id de map_canvas (pero no va a funcionar para mapCanvas ).

11voto

Christopher Dow Puntos 146

Ninguna de estas respuestas trabajó para mí, así que fui a mi div y miró a sus hijos que vi un nuevo div con clase "gm-style", así que puse esto en mi CSS:

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

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

..y que soluciona el problema para mí.

3voto

Pawpoint Puntos 31

¿Quieres cancelar la regla de anchura máxima en la sección CSS usando max-width: ninguno; Esta parece ser la manera alrededor de este problema

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: