diff options
Diffstat (limited to 'getting-started.html')
| -rw-r--r-- | getting-started.html | 20 |
1 files changed, 7 insertions, 13 deletions
diff --git a/getting-started.html b/getting-started.html index 1c864676b..b8a405ce4 100644 --- a/getting-started.html +++ b/getting-started.html @@ -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> |