html - 输入宽度，填充不匹配

Question

我遇到了一个快速而有趣的问题。 应用于输入标签的填充不是添加到输入的宽度，而是减去。

在打印屏幕中，您可以看到 .acct_input_bg 元素的宽度为 390px。 在 DevTool 的盒模型实用程序中，元素具有 363px ( 390 - 20 - 7)!

我用谷歌搜索了一下，发现 Paul Irish blogged about the problem ，但我有 boostrap.css 应用适当的 box-sizing 元素。我还在 this query 中发现对 stackoverflow 的帮助不大and this .

感谢您的帮助!

Answer 1

这是Bootstrap造成的。
The default box sizing is content-box ，并且 Bootstrap 正在将其更改为 border-box，这就是您所看到的行为。

看看the source code :

// Reset the box-sizing
//
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
.box-sizing(border-box);
}
*:before,
*:after {
.box-sizing(border-box);
}