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

Merge pull request #59 from twbs/probably-slightly-better-best-practice

Browse Source 
Use improved box sizing reset
This commit is contained in:
Chris Rebert 2015-01-06 00:04:53 -08:00
commit b361dacff1
2 changed files with 12 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/getting-started/third-party-support.md
View File

@ -7,50 +7,19 @@ While we don't officially support any third party plugins or add-ons, we do offe
### Box-sizing ### Box-sizing
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](http://css-tricks.com/box-sizing/). 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. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2). You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page:
{% highlight scss %} {% highlight scss %}
/* Box-sizing resets /* Box-sizing reset
* *
* Reset individual elements or override regions to avoid conflicts due to * Override an entire region's box model via CSS
* global box model settings of Bootstrap. Two options, individual overrides and * to avoid conflicts due to the global box model settings of Bootstrap.
* region resets, are available as plain CSS and uncompiled Sass formats.
*/ */
.selector-for-some-widget {
/* Option 1A: Override a single element's box model via CSS */
.element {
-webkit-box-sizing: content-box; -webkit-box-sizing: content-box;
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
} }
/* Option 1B: Override a single element's box model by using a Bootstrap Sass 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 with a custom Sass mixin */
.reset-box-sizing {
&,
*,
*:before,
*:after {
.box-sizing(content-box);
}
}
.element {
.reset-box-sizing();
}
{% endhighlight %} {% endhighlight %}

7
scss/_scaffolding.scss
View File

@ -8,10 +8,15 @@
// Heads up! This reset may cause conflicts with some third-party widgets. // Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see // For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing // http://getbootstrap.com/getting-started/#third-box-sizing
// Credit: Jon Neal & CSS-Tricks
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
box-sizing: border-box;
}
*, *,
*:before, *:before,
*:after { *:after {
box-sizing: border-box; box-sizing: inherit;
} }