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是＆＃34; Cascading＆＃34;，意味着您声明的任何样式都可以通过CSS文件/文档中的相同样式声明覆盖。除非绝对至关重要，否则不需要使用!important，我认为这违背了CSS的理念。

采用以下示例：https://jsfiddle.net/av4jbyt6/

<p>
  Test content
</p>

CSS：

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

上面的两个样式都引用了相同的元素（p），但最终的样式会覆盖之前的样式，因为它位于链的下方......

Answer 2

关于这篇文章，您可以通过向元素添加类并使用更高的指定选择器来覆盖!important规则。

How to override !important?

在你的情况下，.menu_items.no-box-sizing之类的东西可以解决问题。

编辑：我想在之后添加一个带有!important 的规则，也可以解决这个问题。

CSS禁用bootstrap box-sizing

2 个答案: