Why is bootstrap css using box-sizing: border-box?

Question

I'm using only the bootstrap dropdown component but its css shrinked many of my existent layout elements and the page looks now a like damaged. After a closer look I found out what's causing this:

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Why are they doing this?

Answer 1

Remove the global reset border-box from the scaffolding area and in your dropdown css adjust the math OR in the rest of your site adjust for the border-box, so if something had a padding of 10px and a total width of 200px, the old way you'd have 180px as the width, but now just make the width the actual width and the borders are counted. This is the same for borders too.