rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

mo betta docs on box-sizing to build on e521ee8309

Browse Source
This commit is contained in:
Mark Otto 2013-09-03 00:49:59 -07:00
parent 49373b9b45
commit 36afdbcaac
1 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
getting-started.html
View File

@ -761,28 +761,50 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<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>Box-sizing</h3>
<p>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 <code>* { box-sizing: border-box; }</code>. Use the following snippet to override it when necessary.</p>
<p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
<p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p>
{% 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 %}
</div>