CSS禁用bootstrap box-sizing

Question

默认情况下bootstrap已经box-sizing破坏了我的布局,我无法禁用它:

#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;
}

这个提示不工作,删除box-sizing布局后工作正常

Quastion:

如何在我自己的布局上禁用此功能并禁用 in-herit

Answer 1

默认情况下,BootStrap在所有元素上设置border-box:

* {
  -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;
}

要覆盖它,只需确保在站点中的BootStrap之后引用自定义CSS文件并将其设置回默认值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;
}

检查这个小提琴:https://jsfiddle.net/movs6gw0/1/

我添加了BootStrap CSS文件作为资源,如果你检查我放在p标签中的内容,你会发现BootStrap在*(所有)元素上的边框样式已被我上面的内容覆盖.

CSS是"Cascading",意味着您声明的任何样式都可以通过CSS文件/文档中的相同样式声明覆盖.!important除非绝对至关重要,否则不需要使用,在我看来,这违反了CSS的哲学.

请看以下示例:https://jsfiddle.net/av4jbyt6/

<p>
  Test content
</p>

CSS:

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

上面的两个样式都引用了相同的元素(p),但最终的样式会覆盖之前的样式,因为它在链的下方...