twitter-bootstrap CSS 禁用 bootstrap box-sizing
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34790054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS disable bootstrap box-sizing
提问by David Wilkinson
by default bootstrap has box-sizingand ruined my layout and i can not disable that :
默认情况下，引导程序已经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;
}
this tip dont work and after delete box-sizinglayout work fine
这个技巧不起作用，删除box-sizing布局后工作正常
Quastion:
问：
how to disable this feature on my own layout and disable in-herit
如何在我自己的布局上禁用此功能并禁用 in-herit
回答by David Wilkinson
BootStrap sets border-box on all elements by default:
BootStrap 默认在所有元素上设置边框：
* {
-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:
要覆盖它，只需确保在您的站点中的 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;
}
Check this fiddle out: https://jsfiddle.net/movs6gw0/1/
检查这个小提琴：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 ptags, you'll notice that BootStrap's border-box styling on *(all) elements has been overriden by what I've placed above.
我添加了 BootStrap CSS 文件作为资源，如果您检查我放置在p标签中的内容，您会注意到 BootStrap 在*（所有）元素上的边框样式已被我放置在上面的内容覆盖。
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 !importantunless absolutely crucial, in my opinion that goes against the philosophy of CSS.
CSS 是“级联”，这意味着您声明的任何样式都可以被 CSS 文件/文档进一步向下的相同样式声明覆盖。!important除非绝对重要，否则不需要使用，在我看来这违背了 CSS 的哲学。
Take the following example: https://jsfiddle.net/av4jbyt6/
以下面的例子：https: //jsfiddle.net/av4jbyt6/
<p>
Test content
</p>
CSS:
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...
上面的两种样式都引用了相同的元素 ( p)，但最终的样式会覆盖之前的样式，因为它在链的下游...
回答by Aer0
Regarding to this post you can overwrite !importantrules by adding a class to your element and using a higher specified selector.
关于这篇文章，您可以!important通过向元素添加类并使用更高的指定选择器来覆盖规则。
In your case, something like .menu_items.no-box-sizingcould do the trick.
在您的情况下，类似的事情.menu_items.no-box-sizing可以解决问题。
EDIT:I guess adding a rule with !importantafterthe one Bootstrap defined, would do the trick as well.
编辑：我想在一个 Bootstrap 定义!important之后添加一个规则，也可以解决这个问题。
