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?

8
  • 3
    ...because math is hard. Commented Dec 9, 2013 at 19:07
  • 2
    Have a look at this css-tricks.com/box-sizing Commented Dec 9, 2013 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.. Commented Dec 9, 2013 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. Commented Dec 9, 2013 at 19:25
  • 1
    because box-sizing:border-box is the best thing to happen to CSS since .... a { text-decoration:none } Commented Dec 9, 2013 at 20:21

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.