diff --git a/getting-started.html b/getting-started.html index 79252dcca8..c4bb236750 100644 --- a/getting-started.html +++ b/getting-started.html @@ -761,28 +761,50 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
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.
Certain third party tools—such as Google Maps and Google Custom Search Engine—have trouble working out of the box with Bootstrap due to our use of * { box-sizing: border-box; }
. Use the following snippet to override it when necessary.
Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to * { box-sizing: border-box; }
, a rule which makes it so padding
does not affect the final computed width of an element. Learn more about box model and sizing at CSS Tricks.
Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).
{% highlight css %} -/* Box-sizing reset +/* Box-sizing resets * - * Wrap your third party code in a `.reset-box-sizing` to override Bootstrap's - * global `box-sizing` changes. Use Option A if you're writing regular CSS or - * Option B for use in Less via mixin (requires access to Bootstrap's mixins). + * Reset individual elements or override regions to avoid conflicts due to + * global box model settings of Bootstrap. Two options—individual overrides and + * region resets—are available as plain CSS and Less. */ -/* Option A: CSS */ -.reset-box-sizing, -.reset-box-sizing * { +/* Option 1A: Override a single element's box model via CSS */ +.element { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } -/* Option B: Less mixin */ -.reset-box-sizing, -.reset-box-sizing * { +/* Option 1B: Override a single element's box model via Bootstrap Less mixin */ +.element { .box-sizing(content-box); } + +/* Option 2A: Reset an entire region via CSS */ +.reset-box-sizing, +.reset-box-sizing *, +.reset-box-sizing *:before, +.reset-box-sizing *:after { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +/* Option 2B: Reset an entire region via custom Less mixin */ +.reset-box-sizing { + &, + *, + *:before, + *:after { + .box-sizing(content-box); + } +} +.element { + .reset-box-sizing(); +} {% endhighlight %}