CSS disable bootstrap box-sizing

Question

by default bootstrap has box-sizing and ruined my layout and i can not disable that :

#menu_items {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
    width: auto;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

this tip dont work and after delete box-sizing layout work fine

Quastion:

how to disable this feature on my own layout and disable in-herit

If it ruined your layout, it's more likely that your layout was wrong. That setting is there for a reason. — Paulie_D, Jan 14 '16 at 13:03

score 22 · Accepted Answer · answered Jan 14 '16 at 13:04

BootStrap sets border-box on all elements by default:

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

To override this, simply ensure your custom CSS file is referenced AFTER BootStrap in your site and set it back to the default content-box :

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

Check this fiddle out: https://jsfiddle.net/movs6gw0/1/

I added the BootStrap CSS file as a resource and if you inspect the content I've placed in the p tags, you'll notice that BootStrap's border-box styling on * (all) elements has been overriden by what I've placed above.

CSS is "Cascading", meaning whatever style you declare can be overriden by the same style declaration further down the CSS file / document. No need to use !important unless absolutely crucial, in my opinion that goes against the philosophy of CSS.

Take the following example: https://jsfiddle.net/av4jbyt6/

<p>
  Test content
</p>

CSS:

p {
  color: white;
}
p {
  color: red;
}

Both styles above reference the same element (p), but the final style overrides the one before because it is further down the chain...

Thank you very much sir. i edit `*` to `#menu_items li {} #menu_items li:before, #menu_items li:after {}` solved my problem — , Jan 14 '16 at 14:58

score 1 · Answer 2 · edited May 23 '17 at 12:10

1

Regarding to this post you can overwrite !important rules by adding a class to your element and using a higher specified selector.

How to override !important?

In your case, something like .menu_items.no-box-sizing could do the trick.

EDIT: I guess adding a rule with !important after the one Bootstrap defined, would do the trick as well.

edited May 23 '17 at 12:10

Community

1
1

answered Jan 14 '16 at 12:56

Aer0

3,792
17
33

CSS disable bootstrap box-sizing

2 Answers2