rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

alt fix to #10278: Change Google Maps compatibility warning to a general box-sizing warning

Browse Source
This commit is contained in:
Mark Otto 2013-09-01 23:32:35 +02:00
parent 26727bfefd
commit bfda156bb9
1 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
getting-started.html
View File

@ -719,23 +719,17 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
</div>
<p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.</p>
<h3>Google Maps</h3>
<p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
<h3>Box-sizing</h3>
<p>Certain third party tools—such as Google Maps—have trouble working out of the box with Bootstrap due to our use of <code>* { box-sizing: border-box; }</code>. Use the following snippet to override it when necessary.</p>
{% highlight css %}
/* Fix Google Maps canvas
/* Box-sizing reset
*
* Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
* global `box-sizing` changes. You may optionally need to reset the `max-width`
* on images in case you've applied that anywhere else. (That shouldn't be as
* necessary with Bootstrap 3 though as that behavior is relegated to the
* `.img-responsive` class.)
* Wrap your third party code in a `.reset-box-sizing` to override Bootstrap's
* global `box-sizing` changes.
*/
.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }
/* Optional responsive image override */
img { max-width: none; }
.reset-box-sizing,
.reset-box-sizing * { .box-sizing(content-box); }
{% endhighlight %}
</div>