Twitter Bootstrap CSS que afecta a Google Maps
Estoy usando Twitter Bootstrap, y tengo un mapa de Google.
Las imágenes en el mapa, como el marcador, están siendo sesgadas por el CSS en Bootstrap.
En el CSS de Bootstrap hay:
img {
border: 0 none;
height: auto;
max-width: 100%;
}
Cuando deshabilito la propiedad max-width usando Firebug, la imagen del marcador aparece como normal.
¿Cómo puedo evitar que el CSS de Bootstrap afecte a las imágenes de Google Maps?
11 answers
Con Bootstrap 2.0, esto parecía hacer el truco:
#mapCanvas img {
max-width: none;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-07 03:50:58
También hay un problema con los selectores desplegables para terreno y superposiciones, agregar ambos solucionará los problemas...
#mapCanvas img {
max-width: none;
}
#mapCanvas label {
width: auto; display:inline;
}
El segundo estilo resolverá otros problemas con el terreno y el cuadro de superposición en algunos navegadores.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-18 09:37:38
Dale a tu mapa canvas div un id de map_canvas.
Este commit de bootstrap incluye la corrección max-width: none para el id map_canvas (pero no funcionará para mapCanvas).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-24 18:37:17
Ninguna de estas respuestas funcionó para mí, así que entré a mi div y miré a sus hijos Vi un nuevo div con clase "estilo gm", así que puse esto en mi CSS:
.gm-style img {
max-width: none;
}
.gm-style label {
width: auto; display:inline;
}
..y eso resolvió el problema para mí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-24 16:08:21
Desea sobrepasar la regla de ancho máximo en la sección CSS utilizando max-width: none; Esta parece ser la forma de evitar este problema
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-04 14:16:58
Cambiar el # MapCanvas no funcionó para nosotros usando la gema gmap4rails, pero sí cuando cambiamos a
.map_container img {
max-width: none;
}
.map_container label {
width: auto; display:inline;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-17 10:22:42
Estoy usando gmaps4rails, esta solución lo hizo por mí:
.gmaps4rails_map img {
max-width: none;
}
.gmaps4rails_map label {
width: auto; display:inline;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-20 15:05:36
La última versión de twitter bootstrap 2.0.4 incluye esta corrección directamente.
Si está envolviendo su contenido en el a (div class="container") como en la página de demostración de twitter bootstrap, debe agregar un style = "height: 100%"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-11 14:47:37
También hay un problema con la impresión de mapas utilizando Print en cualquier navegador. El img { max-width: 100% !important; } no será fijado por el código anterior: necesita agregar una declaración !important como así:
@media print {
img {
max-width: auto !important;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-19 01:18:49
También tuve que desactivar la sombra de caja, y debido al orden de mis inclusiones, agregué el!bandera importante.
#mapCanvas img {
max-width: none !important;
box-shadow: none !important;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-28 04:14:49
Todas las respuestas fueron max-widht: none
Para mí, max-height:inherit funcionó.....
La gente está usando #map, # map_canvas, etc. Mira a tu padre div. Si es azul ,entonces será # blue img { }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-20 15:09:34