0

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?

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
Hexodus
  • 12,361
  • 6
  • 53
  • 72
  • 3
    ...because math is hard. – Diodeus - James MacFarlane Dec 09 '13 at 19:07
  • 2
    Have a look at this http://css-tricks.com/box-sizing/ – Arbel Dec 09 '13 at 19:12
  • 4
    because that way you can define percentages on the layout widths and still be free to add borders and paddings without affecting it.. – Gabriele Petrioli Dec 09 '13 at 19:17
  • 2
    Bootstrap is a framework. You're not supposed to be using individual components out of it without the underlying core CSS, or things like this will inevitably happen. – Blazemonger Dec 09 '13 at 19:25
  • @Blazemonger. I upvoted your comment because in an ideal world, this would be correct. However people use the framework in individual pieces too, that's why the customizer allows you to just get what you want. The problem is the reliance on frameworks has prevented many from understanding css and learning how to adapt stuff. – Christina Dec 09 '13 at 19:46
  • 1
    because box-sizing:border-box is the best thing to happen to CSS since .... a { text-decoration:none } – HaukurHaf Dec 09 '13 at 20:21
  • Obviously I'm too deep in old school css. Honestly box-sizing:border-box is new to me. Why aren't you guy answering the question instead of commenting so I could give you a check mark? – Hexodus Dec 12 '13 at 20:10
  • Try adding jquery datatables to bootstrap with this. Layout is fubar – Sentinel Apr 28 '14 at 10:34

1 Answers1

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.

Christina
  • 34,296
  • 17
  • 83
  • 119