CSS禁用Bootstrap的box-sizing

Question

默认情况下，Bootstrap 有 box-sizing 属性，破坏了我的布局，我无法禁用它：

默认情况下，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之后，布局正常工作。

问题:

如何在我的布局中禁用此功能并禁用inherit？

- user4790312

---

你有什么问题吗？目前没有。 - Clemens Himmer

如果它破坏了你的布局，更有可能是你的布局本身就有问题。那个设置是有原因存在的。 - Paulie_D

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

如果您想要覆盖这个设置，只需在您的网站中保证您的自定义CSS文件在引用BootStrap之后，并将其设置回默认的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文件作为资源，如果您检查我放在

标签中的内容，您将会注意到BootStrap对*（所有）元素的border-box样式已被我上面的样式覆盖。

CSS是“层叠的”，意味着您声明的任何样式都可以被CSS文件/文档中后面声明的同样样式所覆盖。除非绝对必要，否则不需要使用!important, 在我看来，那与CSS哲学相悖。

接下来看一个例子：https://jsfiddle.net/av4jbyt6/

<p>
  Test content
</p>

CSS：

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

上述两种样式引用了相同的元素（p），但是最终样式覆盖了之前的样式，因为它在链条的下方...

- David Wilkinson

---

非常感谢您，先生。我将 * 编辑为 #menu_items li {} #menu_items li:before, #menu_items li:after {} 解决了我的问题。 - user4790312

Answer 2

关于这篇文章，您可以通过为元素添加类并使用更高指定的选择器来覆盖!important规则。 如何覆盖!important？ 在您的情况下，像.menu_items.no-box-sizing这样的东西可能会有用。 编辑：我猜在Bootstrap定义之后添加一个带有!important的规则也可以起到作用。

- Aer0