CSS disable box loading

Question

bootstrap has box-sizingand destroyed my layout by default , and I cannot disable it:

#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 does not work, and after removal the box-sizinglayout works fine

Quastion:

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

Answer 1

BootStrap sets the default flag for all elements:

* {
  -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, just make sure AFTER BootStrap is specified on your own CSS file on your site and set it to the default value 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 out this script: https://jsfiddle.net/movs6gw0/1/

BootStrap CSS , , p, , BootStrap * () , .

CSS "", , , , / CSS. !important, , , CSS.

: https://jsfiddle.net/av4jbyt6/

<p>
  Test content
</p>

CSS

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

(p), , ...

Answer 2

!important, .

! ?

- .menu_items.no-box-sizing .

: !important , Bootstrap, .